待办事项
Import react {component} from ‘react’
Class TodoList extend component{
Costructor(props){
Super(props);
This.state={
Value=””,
List:[]
}
}
getValue(e){
Let value=e.target.value;
This.setState({
value
})
}
addValue(){
This.setState({
List:[...this.state.list,this.state.value],
Value:””
})
}
deletValue(index){
Let list=this.state.list.splice(index,1);
This.setState({
List
})
}
Render(){
Return(
<div>
<div>
<input
value={this.state.value}
onChange={this.getValue.bind(this)} />
<button onClick={this.addValue.bind(this)} >提交</button>
</div>
<div>
{
this.state.list.map((item,index)=>{
Return (<div key={index}
onClick={this.deletValue.bind(this,index)}
>
{item}
</div>
)
})
}
</div>
</div>
)
}
}
export default TodoList;
优化部分
Import react {component} from ‘react’
Class TodoList extend component{Costructor(props){Super(props);This.state={Value=””,List:[]}This.getValue=this.getValue.bind(this);This.addValue=this.addValue.bind(this);This.deletValue=this.deletValue.bind(this);This.showList=this.showList.bind(this);}getValue(e){Let value=e.target.value;This.setState({value})}addValue(){This.setState({List:[...this.state.list,this.state.value],Value:””})}deletValue(index){Let list=this.state.list.splice(index,1);This.setState({List})}showList(){Return (this.state.list.map((item,index)=>{Return ( <div key={index} onClick={()=>this.deletValue(index)}>{item}</div>)}))}Render(){Return(<div><div><input value={this.state.value}onChange={this.getValue} /><button onClick={this.addValue} >提交</button></div><div> {This.showList()}</div></div>)}}
export default TodoList;
父子组件传值
Import react {component} from ‘react’;
Import TodoItem from ‘./TodoItem;Class TodoList extend component{Costructor(props){Super(props);This.state={Value=””,List:[]}This.getValue=this.getValue.bind(this);This.addValue=this.addValue.bind(this);This.deletValue=this.deletValue.bind(this);}getValue(e){Let value=e.target.value;This.setState({value})}addValue(){This.setState({List:[...this.state.list,this.state.value],Value:””})}deletValue(index){Let list=this.state.list.splice(index,1);This.setState({List})}Render(){Return(<div><div><input value={this.state.value}onChange={this.getValue} /><button onClick={this.addValue} >提交</button></div><div> {this.state.list.map((item,index)=>{Return (<TodoItem content={item}index={index} deletValue={this.deletValue.bind(this)}/>)})}</div></div>)}
}
export default TodoList;//下面是TodoItem子组件编写Import react {component} from ‘react’;Class TodoItemextend component{Costructor(props){Super(props);This.delete=this.delete.bind(this)}Delete(){Let deletIndex=this.props.index;This.props.deletValue(deletIndex)}Render(){Return(<div onclick={this.delete} > {this.Props.content} </div>)}}
export default TodoItem;
