特定の配列項目の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()でユーザーの入力を処理すると、ここで私の質問が来る：どのように私はthis.state.userTitleを更新するために、以前の順序で設定した入力のkeyプロパティにアクセスしますアレイ？あるいはこれを行うための別の方法がありますか？

Answer 1

は、私はあなたの状態で、あなたは私がstate` `でメタデータを格納することをお勧めしたいので

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>