ReactJS：状態の配列 - 制御されない入力

Question

私は複数のチェックボックスを持つコンポーネントをビルドしています。私はboolean型VARで唯一のチェックボックスを持っている場合

は、それが（Thinking in Reactのように似て）完璧に動作しますが、私は、配列内の状態を入れたとき、私は制御不能な形の警告取得しています：

が反応を。 js：20541警告：CheckComponentは制御されていないタイプのチェックボックスの入力を変更しています。入力要素は、制御されていない状態から制御されない状態に切り替わるべきではありません（またはその逆）。 >制御された入力要素または制御されていない入力要素を>コンポーネントの存続期間中使用するかどうかを決めます。

コンポーネント：

handleChange: function(e) { 
    this.props.onUserInput(
     this.refs[e.target.name].checked 
    ); 
}, 
render: function(){ 
    var self = this; 
    return(
     <div> 
      <ul> 
       { 
       categories.map(function(d, i){ 
        return (
          <li key = {d}> 
           <input type="checkbox" checked={self.props.checkedBox[i]} name={d} ref={d} onChange={self.handleChange}/> 
           <span> {d} </span> 
          </li> 
         ); 
       }) 
       } 
      </ul> 
     </div> 
    ); 
} 

親コンポーネント：

getInitialState: function(){ 
    return{ 
     checkedBox: [true,true,true,true,true,true,true,true,true,true] 
    }; 
}, 
handleUserInput: function(checkedBox) { 
    this.setState({ 
     checkedBox: checkedBox 
    }); 
}, 
render: function(){ 
    return(
     <div> 
      <CheckComponent checkedBox={this.state.checkedBox} onUserInput={this.handleUserInput} categories={this.props.categories}/> 
      <DisplayComponent checkedBox={this.state.checkedBox} data={this.props.data}/> 
     </div> 
    ); 
} 

は、この配列がおかしいですか？

Answer 1

あなたの状態の配列を単一の値に置き換えます。 チェックボックスのインデックスをonChange関数に渡すだけです。

handleChange: function(i) { 
    this.props.onUserInput(i); 
}, 

... 

<input type="checkbox" checked={self.props.checkedBox[i]} name={d} ref={d} onChange={function() {self.handleChange(i);}}/> 

次に、指定したインデックスで値を変更するだけです。

handleUserInput: function(i) { 
    this.setState({ 
     checkedBox: this.state.checkedBox.map(function(val, idx) { 
         if (idx === i) return !val; 
         return val; 
        ); 
    }); 
}, 

Answer 2

入力要素に '値'属性がありません。 React Documentation値プロパティ無し

Anが空の値で始まる入力をレンダリングする制御されない成分

render: function() { 
    return <input type="text" />; 
} 

この

と言います。 のユーザー入力は、レンダリングされた要素にすぐに反映されます。 値の更新をリッスンする場合は、制御されたコンポーネントと同じように、 onChangeイベントを使用できます。

制御されていないコンポーネントは、それ自身の内部状態を維持します。