特定数组项的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>