Javascript 如何在React中按值设置状态?
如果我有属性的名称,有没有更简单的方法来更新状态?更简单的是:Javascript 如何在React中按值设置状态?,javascript,reactjs,Javascript,Reactjs,如果我有属性的名称,有没有更简单的方法来更新状态?更简单的是: function thingChanged(name, value) { var x = {}; x[name] = value; this.setState(x) } 使用当前的ECMAScript版本无法进一步减少代码。也许使用ES6是可能的,这取决于该语言将具有哪些功能 但是,如果您担心代码冗余,可以将该方法添加到混合中,并在需要的所有组件中引用它 更新:感谢@FakeRainBrigand提供了允许代码缩减的
function thingChanged(name, value) {
var x = {};
x[name] = value;
this.setState(x)
}
使用当前的ECMAScript版本无法进一步减少代码。也许使用ES6是可能的,这取决于该语言将具有哪些功能 但是,如果您担心代码冗余,可以将该方法添加到混合中,并在需要的所有组件中引用它
更新:感谢@FakeRainBrigand提供了允许代码缩减的ES6语法:
setState({[name]:value})代码>它不是很短,但应该可以:
function thingChanged(name, value) {
this.setState(Object.defineProperty({}, name, {value:value}))
}
ES6速记:
this.setState({…x})代码>
this.setState({x})
如果您使用thingChanged
功能进行双向数据绑定,将有助于您使用更少的代码进行绑定。这实际上会将名为name
的状态键更改为value,而不是基于变量name
的键。因此,它与原来的问题不同。正如兹沃纳所说,这是不正确的。这个语法不起作用的事实就是我提出这个问题的原因。啊,你是对的,我不知道我怎么会错过这个属性的索引用法。在这种情况下,没有其他方法可以减少该代码(至少在ES5中没有)。但是,如果您担心代码冗余,您可以使用mixin来定义thingChanged
方法。我将更新我的答案并删除ES6setState({[name]:value})中的错误代码(希望它不会影响太多人:)
是有效的。对我来说,它仍然是3行(我很难分辨出三个不同的开口括号在一起),所以差别不大。它对于更新插件之类的东西很有用,不过对于更深入的更改也很有用。