<div id="example"></div>
<script type="text/babel">
var ToDoInput =React.createClass({
handleAdd(){
var msg =this.refs.elInput.value;
// console.log(msg);
this.refs.elInput.value ='';
this.props.funAdd(msg);
},
render(){
return <div>
<input ref="elInput" type="text"/>
<button onClick={this.handleAdd}>add</button>
</div>
}
})
var ToDoItem =React.createClass({
handleDelete(){
var i =this.props.valIndex;
// console.log('删除的下标',this.props.valIndex);
this.props.funDelete(i);
},
render(){
return <li>
<button
onClick={this.handleDelete} >delete</button>
<span>{this.props.valVal}</span>
</li>
}
})
var ToDoList =React.createClass({
render(){
return <ul>
{
this.props.valList.map(
(value,index)=>{
// console.log(value,index);
return <ToDoItem
funDelete={this.props.funDelete} valVal={value} valIndex={index} key={index} >
</ToDoItem>
}
)
}
</ul>
}
})
var ToDoBox =React.createClass({
getInitialState(){
return {
list:[]
}
},
handleDelete(i){
var nowList =this.state.list;
nowList.splice(i,1);
this.setState(
{list:nowList}
)
},
handleAdd(msg){
var nowList =this.state.list;
nowList.push(msg);
this.setState(
{list:nowList},
()=>{
// console.log('异步',this.state.list);
}
)
},
render(){
return <div>
<ToDoInput funAdd={this.handleAdd}/>
<ToDoList
funDelete={this.handleDelete} valList={this.state.list} />
</div>
}
})
ReactDOM.render(
<ToDoBox></ToDoBox>,
document.getElementById('example')
)
</script>
