特定数组项目的setState（）

我正在生成多个输入，并希望将它们的值绑定到存储在state中的数组。我使用的是数组，因为输入的数量不同，我无法静态创建它们。我指定的值，并将其按预期工作：特定数组项目的setState（）

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先前设置阵列？还是有不同的方式来做到这一点？

来源

2017-01-02 Krzysztof Kraszewski

我建议你存储'state'元数据，并然后使用它在'render（）'中生成组件，与将组件存储在'state'中相反。 – lux

@lux谢谢，我会这样做，我是React的新手。但我不明白它是如何解决我的问题。或者你只是给我一个建议？ –

作为一种最佳实践... jsx应该写在render方法中。 –

我觉得你不需要储存inputs状态，你可以移动到inputsrender，像这样

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>

来源

2017-01-02 20:24:31

谢谢！这正是我想要的，没有想到将'index'传递给'onChange'函数。 –

特定数组项目的setState（）

回答

相关问题