如何在React中通过值设置状态？

Question

如果我有属性名称，有没有更简单的更新状态的方法？比这个更简单的方法：

function thingChanged(name, value) { 
  var x = {};
  x[name] = value;
  this.setState(x)
}

- Joe

Answer 1

目前的ECMAScript版本不能进一步减少代码量。也许在ES6中可能会有所改善，这取决于语言将具备哪些特性。

然而，如果您担心代码冗余，可以将该方法添加到混合中，并在所有需要的组件中引用它。

更新：感谢@FakeRainBrigand提供ES6语法，允许减少代码：setState（{[name]：value}）;

- Cristik

---

这实际上会更改状态键称为 name 的值，而不是基于变量 name 的键。因此，它与原始问题不同。 - Samuli Hakoniemi

正如zvona所说，那是不正确的。这个语法无法工作的事实是我提问的原因。 - Joe

啊，你说得对，我不知道怎么会错过属性的索引用法。在这种情况下，没有其他方法可以减少代码量（至少在ES5中没有）。然而，如果你担心代码冗余，你可以使用定义thingChanged方法的混入。 - Cristik

我会更新我的答案并移除不正确的代码（希望没有影响太多人 :)）。 - Cristik

在ES6中，setState({[name]: value})是有效的。对我来说，它仍然是三行（对于我来说，三个不同的开括号在一起很难辨认），所以几乎没有区别。但是，对于深层次的更改，像更新插件这样的东西还是很有用的。 - Brigand

@FakeRainBrigand，感谢你的提示，如果我在我的回答中引用你的话，可以吗？ - Cristik

Answer 2

这可能并不更短，但是这样做应该可以实现：

function thingChanged(name, value) { 
  this.setState(Object.defineProperty({}, name, {value:value}))
}

- David Hellsing

Answer 3

ES6 简写：

this.setState({...x});

这句话是将 x 对象中的所有属性展开并作为新的 state 设置。

this.setState({ x });

这句话是将变量 x 直接设置为新的 state 值。

- Cory Robinson

Answer 4

如果您正在使用thingChanged函数进行双向数据绑定，LinkedStateMixin将帮助您以更少的代码完成它。

- jrullmann