setState を使用して state の state.item を更新するにはどうすればよいですか?

Question

ユーザーが独自のフォームをデザインできるアプリケーションを作成しています。例えば。フィールドの名前と、含める必要がある他の列の詳細を指定します。

このコンポーネントは JSFiddle として利用できます。

初期状態は次のようになります:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var 項目 = {};
   items[1] = { 名前: 'フィールド 1'、populate_at: 'web_start'、
                同じもの: '顧客名',
                autocomplete_from: 'customer_name'、タイトル: '' };
   items[2] = { 名前: 'フィールド 2'、populate_at: 'web_end'、
                同じもの: 'ユーザー名',
                    autocomplete_from: 'user_name'、タイトル: '' };

     返却商品 };
   }、

  レンダリング: function() {
     var _this = これ;
     戻る （
       <div>
         { Object.keys(this.state.items).map(関数 (キー) {
           var item = _this.state.items[キー];
           戻る （
             <div>
               <PopulateAtCheckboxes this={this}
                 Checked={item.populate_at} id={key}
                   Populate_at={data.populate_at} />
            </div>
            );
        }、 これ）}
        <button onClick={this.newFieldEntry}>新しいフィールドを作成</button>
        <button onClick={this.saveAndContinue}>保存して続行</button>
      </div>
    );
  }

ユーザーが値を変更したときに状態を更新したいのですが、正しいオブジェクトを見つけるのに苦労しています。

var PopulateAtCheckboxes = React.createClass({
  handleChange: 関数 (e) {
     item = this.state.items[1];
     item.name = '新しい名前';
     items[1] = アイテム;
     this.setState({アイテム: アイテム});
  }、
  レンダリング: function() {
    var PopulateAtCheckbox = this.props.populate_at.map(function(value) {
      戻る （
        <={値} のラベル>
          <input type="radio" name={'populate_at' this.props.id} value={value}
            onChange={this.handleChange} selected={this.props.checked == 値}
            ref="populate-at"/>
          {価値}
        </ラベル>
      );
    }、 これ）;
    戻る （
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

items[1].name を更新するには、this.setState をどのように作成すればよいですか?

Answer 1

これを実現するには、 アップデート 不変ヘルパー : リーリー

あるいは、 shouldComponentUpdate() ライフサイクル メソッドの === を使用してこれに対する変更を検出できるかどうかを気にしない場合は、状態を直接編集して、コンポーネントを強制的に再レン​​ダリングします。これは、オブジェクトを状態から引き出して編集するという点で、@limelightsの回答と実際には同じです。

リーリー

---

後で編集追加:

単純なコンポーネント通信 react-trainingのレッスンを確認して、状態を保持する親コンポーネントから状態を保持する必要がある子コンポーネントにコールバック関数を渡す方法の例を確認してください。状態変化をトリガーします。

Answer 2

ヘルパー ライブラリを使用せずにこれを行う方法は次のとおりです:

リーリー

必要に応じて、ステップ 2 と 3 を組み合わせることができます:

リーリー

または、すべてを 1 行で実行することもできます:

リーリー

注: items を配列として作成しました。 OPはオブジェクトを使用しました。ただし、コンセプトは同じです。

---

ターミナル/コンソールで何が起こっているかを確認できます:

リーリー