使用某些浏览器时 this.setState 发生了奇怪的事情

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 ["
}

这在 IE 和 Chrome 上都抛出语法错误 Windows 7。然后我改为

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

试试这个

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

Answer 2

这是computed property name syntax:

{ [target_id]: target_value }

它是在 ES2015 中添加到语言中的，在特别旧的浏览器中不起作用，包括所有版本的 IE。

如果您想支持旧版浏览器，则需要改为执行以下操作：

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

许多 React 开发人员通过使用诸如 Babel and a build tool like Webpack or Browserify. Googling something like "React Webpack ES6 tutorial" will bring up some good information, like this tutorial: http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/ 之类的转译器来使用 ES2015（及更高版本）的功能，但是需要一定的工作量才能完成设置。

使用某些浏览器时 this.setState 发生了奇怪的事情

React Weird thing happened to this.setState when working with some browsers

javascript

reactjs

react-jsx