web-dev-qa-db-ja.com

setState（）を動的なキー名で処理しますか？

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

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

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

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

javascriptreactjscomputed-properties
200
trad

@ Coryのヒントのおかげで、私はこれを使った。

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

    this.setState( stateObject );    
},

ES6または Babel transpiler を使用して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 });
}
234
trad

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

例えば：

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

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

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

コードをリファクタリングして見やすくするために、構造を解除することもできます。

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

.mapを使ったループでは、次のように動作します。

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

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

5
Johnatan Maciel

ES6 +では、あなただけができます[${variable}]

0
Jujhar Singh