如何使用onChange在Reactjs中使用多个表单字段？

我试图让这个表单工作，但是当我尝试键入表单域时，没有任何反应。如何使用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;

感谢您的帮助！

来源

2017-09-06 Walter Carrera

为输入添加名称prop并重试。 – bennygenel

你是否正确地绑定你的功能？ – Andy

我推荐使用React.createClass（）来避免绑定的需要。 –

您的代码应该可以在缺少一件小事情的情况下正常工作。
在您的更改处理程序中，您使用的是event.target.name，但缺少这些<input />元素的名称属性。
例如：

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

title属性应当对应于课程的状态的性质。

来源

2017-09-06 20:14:32

哇，惊人的小事情可以在代码中产生巨大的差异。谢谢！ –

我怀疑问题是你的元素没有type =“submit”，所以表单从不提交。 onChange事件可能正确触发（尽管正如bennygenel所指出的那样，输入字段应该具有“name”属性以使您的状态更改正常工作！）

来源

2017-09-06 19:53:34

如何使用onChange在Reactjs中使用多个表单字段？

回答

相关问题