特定數組項的setState（）

Question

我正在生成多個輸入，並希望將其值綁定到存儲在state數組。 我使用數組是因為輸入的數量各不相同，並且無法靜態創建它們。 我正在分配它們的值，它按預期工作：

    this.setState({
      wordInputs: this.state.userTitle.map((word) => {
      let input = <input type="text" key={i} value={this.state.userTitle[i]} onChange={this.checkWordInput}/>
      i++
      return input
      })
    })

現在，我想使用checkWordInput()處理用戶輸入，這是我的問題：如何更新輸入的key屬性以更新this.state.userTitle數組？ 還是有其他方法可以做到這一點？

Answer 1

我認為您不需要在狀態中存儲inputs ，可以將inputs移動到render ，就像這樣

 class App extends React.Component { constructor() { super(); this.state = { userTitle: [ 'title - 1', 'title - 2', 'title - 3', 'title - 4' ] }; } checkWordInput(index, e) { this.setState({ userTitle: this.state.userTitle.map((title, i) => ( i === index ? e.target.value : title )) }) } render() { const inputs = this.state.userTitle.map((title, index) => ( <input type="text" key={index} value={title} onChange={ (e) => this.checkWordInput(index, e) } /> )); return ( <form> { inputs } { this.state.userTitle.map((title, i) => <p key={i}> { title }</p>) } </form> ); } } ReactDOM.render( <App />, document.getElementById('app') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>