Skip to content

Instantly share code, notes, and snippets.

@maxlibin
Last active March 9, 2017 11:30
Show Gist options
  • Save maxlibin/211a48db142dbcd52858f32223e51a6b to your computer and use it in GitHub Desktop.
Save maxlibin/211a48db142dbcd52858f32223e51a6b to your computer and use it in GitHub Desktop.
simple react example
// http://mikelambert.me/react/?#rVTBbptAED2brxhxAilZq9fERqocVYrUqlLcWxRVBCYxDbB0d3BiWfx7Z3cxrGkS5xAJyzAwb968fTNZmWoNv2QuV5uizAFfCOtcww2mGYmVrBpZY02wDwAyWWtSbUZSRY2SjY5NdKbbBg+BSw50/OPrEemasLquc3yJ0H2KolG4ZbwrfEjbkiKbAECbQguLII7SvHhhAvEIr5gml7W45olaVUf2HmBRFsnez2XADhb3LZGsgXYNLkP3EIKsV2WRPS3d9351cc81LYW4S84Xc5eRLOaMbgs5Nl0QZIOI3wtN+hNF3KR1XuINVnKL0e9tWvb9es0p+9Kwdh942adkasskmM2mSmlRpU0UmdszcLLDMoHFaBJfpV44n6gvHBiY5d6dQOES7F8HT7gb7udJ3AUzpjQ3nN4Q92v+Kf60uvQSakoJYQn7XhLD8wLC0D5203NYt/dVQafMPD0gbbO+SVVFY02rtO9+jbQ2L6LXqcRTLiv+e8QPcSmRLBr3iYJSxccn2Ckt/qfGwMGe10en7YFb4zly6iz34BnCxTxDQJf0aZxY1E1L/TwSn6ydRtvXMYqLHaGAbaA336iocdKIfzTw7hjChF00zPKhg7lpYeK7wLfeu76bWM8f0am/iLH0xe3d1F9Ti3mj/o5FHJongQ0IJpOlFN0akLt49I/FOrFYBsMo1Mx7in05aa2vqBveoQ7nDL7YWm/Snr3O+nWa7/ouL7beYTfJBstSPsOzVLyjDD7wRajJCiWEWMybJBgzxoVt196RmSynDsblemrP+b47LKtx8k9OhZ8/uHJocDSl9d/Vzx+iV8bW4uQzyGXWVmxJ8bdFtVtjidaNofijz5XJOpct8byFMe+Gfw==
class TodoChild extends React.Component {
constructor(props){
super(props);
}
getItemIndex(e){
e.preventDefault();
this.props.getItemIndex(this.props.index)
}
render(){
return(
<li>{this.props.item} <button type="button" onClick={this.getItemIndex.bind(this)}>-</button></li>
)
}
}
class TodoLists extends React.Component {
constructor(props){
super(props);
}
handleRemove(_val){
this.props.removeItem(_val);
}
render(){
return(
<ul>
{this.props.items.map((item, index) => <TodoChild getItemIndex={this.handleRemove.bind(this)} item={item} index={index} key={index} />)}
</ul>
)
}
}
class TodoAdd extends React.Component {
constructor(props){
super(props);
this.state = {
item: ""
}
}
handleSubmit(e){
e.preventDefault();
this.props.submitForm(this.state.item);
this.setState({
item: ""
})
}
handleChange(e){
e.preventDefault();
let item = e.target.value;
this.setState({item})
}
render(){
return(
<form onSubmit={ this.handleSubmit.bind(this) }>
<input type="text" onChange={ this.handleChange.bind(this) } value={this.state.item} />
<button type="submit">Add</button>
</form>
)
}
}
class Todo extends React.Component {
constructor(){
this.state = {
todos:[]
}
}
handleSubmit(_val){
this.setState({
todos:this.state.todos.concat([_val])
})
}
handleRemove(_val){
let res = this.state.todos;
this.state.todos.splice(_val, 1)
this.setState({
todos:this.state.todos
})
}
render(){
return(
<div>
<p>hellow world this is test todo...</p>
<TodoLists items={this.state.todos} removeItem={this.handleRemove.bind(this)} />
<TodoAdd submitForm={ this.handleSubmit.bind(this) } />
</div>
)
}
}
ReactDOM.render(<Todo />, document.querySelector(".js-react-output"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment