Reactjs setState（）具有动态密钥名称？ [英] Reactjs setState() with a dynamic key name?

问题描述

编辑：这是重复的，请参阅此处

this is a duplicate, see here

我在设置状态时找不到使用动态密钥名称的任何示例。这就是我想要做的事情：

I can't find any examples of using a dynamic key name when setting the state. This is what I want to do:

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

其中event.target.id用作要更新的状态键。这在React中不可能吗？

where event.target.id is used as the state key to be updated. Is this not possible in React?

推荐答案

感谢@ Cory的提示，我使用了这个：

Thanks to @Cory's hint, i used this:

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

    this.setState( stateObject );    
},

如果使用ES6或 Babel转换器转换你的JSX代码，你可以用计算属性名称：

If using ES6 or the Babel transpiler to transform your JSX code, you can accomplish this with computed property names, too:

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

这篇关于Reactjs setState（）具有动态密钥名称？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！