Javascript 如何让onChange处理Reactjs中的多个表单字段？

我试图让这个表单正常工作，但当我试图在表单字段中键入内容时，什么也没发生

起初，我要输入的文本会同时出现在字段上，然后我做了一些更改

现在它根本不起作用了

我认为这是onChange的问题，但我不确定

代码如下：

handleChange = (event) => {
  let newState = {};

  newState[event.target.name] = event.target.value;

  this.setState(newState);
}

handleSubmit = (event) => {
  event.preventDefault();
  this.setState({
      title: '',
      description: '',
      dueDate: '',
      assignee: '',
      items: [...this.state.items, this.state.title, this.state.description, 
this.state.dueDate, this.state.assignee]
  });
}

render() {
  return (
    <div>
    <button onClick={this.openModal}>Add a Task</button>

    <ReactModal
        isOpen={this.state.modalIsOpen}
        onRequestClose={this.closeModal}
    >

        <div className='modalDialog'>
            <form className="App" onSubmit={this.handleSubmit}>
                Title: <input value={this.state.title} onChange={this.handleChange} />
                Description: <input value={this.state.description} onChange={this.handleChange} />
                Due Date: <input value={this.state.dueDate} onChange={this.handleChange} />
                Assignee: <input value={this.state.assignee} onChange={this.handleChange} />
                <button>Submit</button>
            </form>
            <button onClick={this.closeModal}>X</button>
        </div>
    </ReactModal>

    <List items={this.state.items} />
    </div>
);
}
}

const List = props => (
<ul>
    {props.items.map((item,index) => <li key={index}>{item}</li>)}
</ul>
);

export default App;

handleChange=（事件）=>{
让newState={}；
newState[event.target.name]=event.target.value；
this.setState（newState）；
}
handleSubmit=（事件）=>{
event.preventDefault（）；
这是我的国家({
标题：“”，
说明：“”，
截止日期：''，
受让人：“，
items:[…this.state.items，this.state.title，this.state.description，
this.state.dueDate，this.state.assignee]
});
}
render（）{
返回(
添加任务
标题：
说明：
到期日：
受让人：
提交
X
);
}
}
常量列表=道具=>(

{props.items.map（（item，index）=>
{item}
）}

);
导出默认应用程序；

---

谢谢你的帮助

我怀疑问题在于您的元素没有type=“submit”，因此表单从不提交。onChange事件可能触发正确（尽管正如bennygenel指出的，输入字段应该有一个“name”属性，以使状态更改生效！）

除了缺少一点小东西之外，您的代码应该运行良好。
在更改处理程序中，您正在使用

事件.target.name

，但是这些

元素上缺少name属性。
例如：

Title: <input name="title" value={this.state.title} onChange={this.handleChange} />

标题：

---

title

属性应与“当然”状态上的属性相对应

将name prop添加到输入并重试。是否正确绑定函数？我建议使用React.createClass（）以避免绑定。您忘记在输入中提到name属性，因此event.target.name未定义。看看这个提琴哇，令人惊讶的是，小东西可以在代码中产生巨大的差异。谢谢