Question

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

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

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 transpiler转换JSX代码，您也可以使用computed property names完成此操作：

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

当您需要处理多个受控输入元素时，可以为每个元素添加一个name属性，让处理程序函数根据event.target.name的值选择要执行的操作。

例如：

＆＃13;

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

＆＃13;

Answer 3

我是如何完成这个......

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

Answer 4

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

 SELECT * FROM `users` where Number='1212' OR Number='0921'

Answer 5

循环使用.map就像这样：

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

请注意[]参数中的type。希望这会有所帮助：）

Answer 6

我有类似的问题。

我想设置第二级密钥存储在变量中的状态。

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

但这不是有效的语法。

我使用以下代码实现了这一目标：

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

Answer 7

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

请注意引号。

Answer 8

您的带有字典的状态会更新某些键而不会丢失其他值

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

解决方案低于

{{1}}

此处将键“页面”的值更新为值5

Answer 9

使用ES6 +，您只需[[${variable}]

Answer 10

我一直在寻找一个漂亮而简单的解决方案，发现了这一点：

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

希望这会有所帮助

Answer 11

当给定元素是对象时：

handleNewObj = e => {
        const data = e[Object.keys(e)[0]];
        this.setState({
            anykeyofyourstate: {
                ...this.state.anykeyofyourstate,
                [Object.keys(e)[0]]: data
            }
        });
    };

希望它对某人有帮助

Answer 12

可以使用扩展语法，如下所示：

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

Reactjs setState（）具有动态密钥名称？

12 个答案: