将props数组列出到react组件中

时间:2019-02-25 19:23:45

标签: javascript reactjs components state react-props

我在尝试制作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;

0 个答案:

没有答案