如何使用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中使用多個表單字段？

回答

相關問題