我在尝试制作toDo应用程序时反应不佳,我将表单作为父组件,并将输入作为道具发送到列表组件。我很困惑是否必须声明state:[];
,然后在发送道具时创建一种方法来设置新状态,因为该列表将填充表单的输入,然后显示它,或者我使用shuold道具从父组件以数组形式出现。我希望我清楚自己的处境。到目前为止,这是我的代码:
class List extends React.Component{
constructor(props){
super(props);
this.state = {listTasks:props.task};
this.onChange=this.onChange.bind(this);
}
onChange(){
const tasks = this.props.task;
return tasks.map((task,index) =>
<div className='item' key = {index}><li >{task}</li><button onClick={this.handleButton}>Done</button></div>);
}
render(){
//const tasks = this.props.task;
//const listTasks = tasks.map((task,index) =>
//<div className='item' key = {index}><li >{task}</li><button onClick={this.handleButton}>Done</button></div>);
console.log(this.state);
return(
<div className='listWrapper'>
<ul className='list'>{this.state.task}</ul>
</div>
);
}
}
export default List;