反应的setState与动态密钥

我有下面的代码片段：反应的setState与动态密钥

onChange(e) { 
    e.persist 
    this.setState((prevState) => { 
     prevState[e.target.id] = e.target.value 
     return prevState 
    }) 
    }

的我将如何设置状态为每个键使用类似上面的代码。

这是初始状态：

this.state = { 
     heading: this.props.match.params.length > 1 ? "Edit Post" : "Create Post", 
     title: '', 
     category: '', 
     body: '', 
     author: '' 
    }

来源

2017-10-16 Strahinja Ajvaz

那么问题是什么？ 'onChange'中的代码将设置一个动态状态键作为你的事件元素的ID。你不需要坚持事件 - 只要使用'const' {target：{value，id}} = e'然后使用'id'和'value' –

[Reactjs setState（）？]（https://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name） –

基本规则是：

我们可以用Computed property names概念和使用任何JS表达动态计算的对象属性的名称。为此，我们需要将表达式放在[]之内。

像这样：

var obj = { 
 
    [10 * 20 + 1 - 5]: "Hello" 
 
}; 
 

 
console.log('obj = ', obj);

解决方案：

按照您发布的代码，你需要把e.target.id内[]，就像这样：

onChange(e) { 
    this.setState({ 
     [e.target.id]: e.target.value 
    }) 
}

或者，我们可以先创建一个对象，然后将该对象传递给setState功能，像这样：

onChange(e) { 
    let obj = {}; 
    obj[e.target.id] = e.target.value 
    this.setState(obj); 
}

而且你不需要prevState。您可以直接用新值更新状态变量。只有当新的状态值取决于先前的状态值时才需要prevState，例如在计数器的情况下。

来源

2017-10-16 13:20:38

我曾尝试过，但我得到这个错误'TypeError：无法读取属性'setState'of undefined' –

这意味着你忘记绑定'onChange'方法，把这行放在构造函数中：'this.onChange = this.onChange.bind（this）':) –

谢谢！对不起，浪费你的时间 –

反应的setState与动态密钥

回答

相关问题