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，就像这样

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

特定数组项的setState（）

1 个答案: