React：让子类分配状态？

Question

设计说明

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

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

并且说saveData 函数是一个胖箭头函数，它应该将输入值从子类推送到父类中的特定状态属性：

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

每个子类都获得通过 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 是硬编码的。这不是我想要的。我想要另一个参数设置 state 属性，在我的脑海中可能很简单：

/* 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 是一个内容完全不同的变量、参数或其余参数。

有没有办法让子类分配...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})

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