javascript - 動的キー名を持つReactjs setState()?

Question

編集：これは重複しています。ここを参照してください

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

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

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

Answer 1

@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 });
}

Answer 2

どうやってこれを達成した...

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

Answer 3

I just wanted to add, that you can also use de-structuring to refactor the code and make it look neater.

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