リアクションのテキスト入力によるループ処理

Question

私はユーザーがいくつかのテキストフィールドを指定し、この量のフィールドを動的にレンダリングするアプリケーションを構築しています。状態を設定して各フィールドで一意になるようにするのに問題があります。

現在、フィールドの1つを変更すると、他のすべてのフィールドはその一意のフィールド状態で更新されます。ここに状態を設定するhandleChange関数があります：

handleChange: function(e){ 
     this.setState({ 
      value: e.target.value, 
     }); 
    } 

状態を配列として初期化し、そのように入力を追跡できますか？それとももっと良い方法がありますか？

Answer 1

状態の値の配列を維持すると正常に動作します。更新の対象を知るためには、入力のインデックスを渡していることを確認するだけで済みます。 bindはこれに役立ちます：

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { values: [] }; 
    } 

    handleChange(i, e) { 
    this.setState({ 
     values: { ...this.state.values, [i]: e.target.value } 
    }); 
    } 

    render() { 
    var fieldsArray = []; 

    for (var i = 0; i <= this.props.numToShow; i++) { 
     fieldsArray.push(
     <div> 
      <label> 
       <div className="label">{i}</div> 
       <input 
        type='text' 
        value={this.state.values[i]} 
        name={this.state.values[i]} 
        onChange={this.handleChange.bind(this, i)} /> 
      </label> 
     </div> 
    ); 
    } 

    return (
     <div className = 'inputs'> 
     {fieldsArray} 
     </div> 
    ); 
    } 
}