動的なキー名を持つReactjs setState（）？

編集：これは複製です、ここを参照してください

状態を設定するときに動的キー名を使用する例は見つかりません。これは私がしたいことです：

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

event.target.idは、更新される状態キーとして使用されます。これはReactでは不可能ですか？

@Coryのヒントのおかげで、私はこれを使用しました：

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

ES6またはBabelトランスパイラーを使用してJSXコードを変換する場合は、計算されたプロパティ名でもこれを実行できます。

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

複数の制御された入力要素を処理する必要がある場合、各要素に名前属性を追加して、ハンドラー関数にevent.target.nameの値に基づいて実行する処理を選択させることができます。

例えば：

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}

私がこれを達成した方法...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

追加したいのは、解体を使用してコードをリファクタリングし、見栄えをよくすることもできることです。

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

次の.mapような作業をループします。

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

[]in typeパラメータに注意してください。お役に立てれば ：）

同様の問題がありました。

2番目のレベルのキーが変数に格納されている場所の状態を設定したいと思いました。

例えば this.setState({permissions[perm.code]: e.target.checked})

ただし、これは有効な構文ではありません。

これを実現するために、次のコードを使用しました。

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

ES6 +を使用すると、次のことができます[ ${variable}]

私はきれいでシンプルな解決策を探していました、そして私はこれを見つけました：

this.setState({ [`image${i}`]: image })

お役に立てれば

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

引用文字を気にしてください。

辞書付きの状態は、他の値を失うことなくいくつかのキーを更新します

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

解決策は以下です

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

ここで、キー「ページ」の値を値5に更新します

次のようなスプレッド構文を使用できます。

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},