React：让childclass分配状态？

Question

设计说明

我有一个 React class 和一个从 child classes（模块）中调用的箭头函数。它简称为saveData，其目的是将每个模块特定的输入值保存到state。好吧，我的默认状态有默认道具（static defaultProps）：

state = {
  a : this.props.initialA,
  b : this.props.initialB,
  c : ...
}

并且说 saveData 函数是一个粗箭头函数，它应该将输入值从 child class 推送到 [= 中的特定状态 属性 82=]:

saveData = (val) => this.setState( {a : val} )

每个 child class 都得到通过 JSX 传递的 saveData 函数并有自己的输入。单击按钮时，我调用该函数并将值作为参数：

/* A child class */

pushData = (e) => {
  e.preventDefault()
  const val = this.refs.a.value
  this.props.saveData(val)
}

render() {
  return(
    <input id='a' ref='a' ... />
    <button onClick={this.pushData} ... />
  )
}

一切都很好！现在为我关心

如您所见，状态 属性 a 在上面的示例中是硬编码的。这不是我想要的。我想让另一个参数设置状态 属性，这在我看来可能很简单：

/* In parent class */

saveData = (prop, val) => this.setState( {prop : val} )


/* In child class */

pushData = (e) => {
  ...
  const val  = this.refs.a.value,
        prop = a;
  this.props.saveData(prop, val)
}

---

下面是我使用这种方法遇到的问题：

• 我没理解错箭头函数不接受参数吗？因为我确实在 pushData 中使用了 (e)，甚至 saveData 中的 (val) 以前也为我工作过。
• 关键点：无论我怎么说，this.setState({prop:val})中的属性都不会被赋值。它只会添加一个名为 prop 的新 属性，即使 prop 是一个变量、参数或内容完全不同的剩余参数。

有没有办法让 child class 分配 ...setState({prop...？

（或者我只是太复杂了？我不是在思考React吗？我有时觉得在 React 中思考就像在思考 $con"!"\˜*.ht"&&su20%+o?else{((())...())}of）

Answer 1

箭头函数不过是

的语法糖

()=>{} is equivalent to function(){}.bind(this)

因此，它们的行为与任何其他函数完全相似，只是作用域是词法绑定的。它确实需要参数。如果 saveData 没有按照您希望的方式工作，您可能是在用错误的值调用该函数。

而且，当你这样做时

saveData = (prop, val) => this.setState( {prop:val} )

javascript 不会将 prop 评估为变量。这里 'prop' 被解释为一个字符串。

相反，在 ES5 中试试这个

var temp = {};
temp[prop] = val;
saveData = (prop, val) => this.setState( temp )

或者这个，在 ES6 中，

saveData = (prop, val) => this.setState({[prop]:val})

[] 允许您评估包含在其中的变量。