Question

Reactjs setState() 具有动态键名吗？

2015-03-26

252018

javascript reactjs computed-properties

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

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

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

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

例如：

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

Answer 3

我如何实现这个...

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