Reactjs setState（） with a dynamic key name？

javascript reactjs computed-properties

2022-08-30 00:04:35

编辑：这是一个重复，看到这里

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

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

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

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

答案 2

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

例如：

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