Question

我是React的新手，我遇到的这个问题真的令人心烦意乱。我正在动态地获取设置值的关键字：

hangleChange: function (event) {
var target = event.currentTarget,
    target_id = target.id.toString(),
    target_value = target.value;

this.setState({ [target_id]: target_value }); // Syntax Error: "Unexpected token ["
}

这会在Windows 7上的IE和Chrome上引发语法错误。然后我改为

hangleChange: function (event) {
  var target = event.currentTarget,
      target_id = target.id.toString(),
      target_value = target.value;

  this.setState({ target_id: target_value }); // Removed "[]" that causes syntax error
}

它不再抛出错误，但它会创建一个新属性this.state.target_id并将该值设置为target.value。但是，如果我指定target_id之类的name，并将该值设置为foobar，请执行以下操作：

setState({ 'name': 'foobar' }) // works this way

它可以解决问题。但我希望我能自动执行此操作，以便我不必为应用中的每个可更改字段设置handleChange函数。

你们之前有过类似的问题吗？欢迎任何建议！

谢谢！

Answer 1

这是computed property name syntax：

{ [target_id]: target_value }

它被添加到ES2015的语言中，并且在特别旧的浏览器中无法使用，包括所有版本的IE。

如果您想支持旧浏览器，则需要执行此操作：

var newState = {};
newState[target_id] = target_value;
this.setState(newState);

许多React开发人员通过使用Babel等转换器和Webpack或Browserify等构建工具来使用ES2015（及其他）功能。谷歌搜索类似＆＃34; React Webpack ES6教程＆＃34;将提供一些很好的信息，比如本教程：http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/但是要设置它需要一定的工作量。

Answer 2

试试这个

hangleChange: function (event) {
  var target = event.currentTarget,
      target_id = target.id.toString(),
      target_value = target.value,
      state = {};

  state[target_id] = target_value;
  this.setState(state);
}

使用某些浏览器

2 个答案: