Reactjs的setState（）与dynamic密钥名称？

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

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

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代码，你也可以使用计算出来的属性名称来完成：

 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

我是怎么做到的

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

Answer 3

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

例如：

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

Answer 4

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

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