javascript - 如何在reactjs中提交时插入数组？

Question

我是reactjs新手，正在尝试实现简单的待办事项应用程序。但是，提交后我无法插入数组，即状态变量。

以下是我的代码:

import React, { Component } from 'react';


class ToDo extends Component{

constructor(props){
    super(props)
    this.state={list:['hello'],item:''}
    this.handleSubmit=this.handleSubmit.bind(this)
    this.handleSearchChange=this.handleSearchChange.bind(this)
}
handleSubmit(e){
    e.preventDefault();
    this.setState(state=>({list:(state.list.push(this.state.item))}))

}
handleSearchChange(e){
    this.setState({item:e.target.value})
}

render(){
    console.log('state:',this.state.list)
    let listing=this.state.list.map((item)=><li key={item}>{item}</li>)
    return(
            <div >
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                    <label>
                    <input className="form-control "type="text" value={this.state.item} onChange={this.handleSearchChange} />
                    </label>
                    <label>
                    <input type="submit" value="Submit" className="form-control" />
                    </label>
                    </div>
                </form>
                <ul>{listing}</ul>
            </div>

        )
}
}

export default ToDo;

当我尝试单击“提交”时，它会重定向到错误。如有帮助，将不胜感激。谢谢。

Answer 1

试试这个:

handleSubmit(e){
        const { list, item } = this.state
        e.preventDefault();
        this.setState({ list: [...list, item] })
}

解释:你不能改变数据，而是像这样连接它。建议:始终使用 es6 函数，因此您永远不需要绑定(bind)。