1

设计说明


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

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

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

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

每个子类都获取saveData通过 JSX 传递的函数并有自己的输入。单击按钮时，我以值作为参数调用该函数：

/* 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)
}

现在这是我使用这种方法面临的问题：

  • 我是否正确理解箭头函数不接受参数？因为我完全确实使用(e)过pushData，甚至(val)在saveData以前为我工作过。
  • 关键点：不管我怎么说，里面的属性this.setState({prop:val})都不会被分配。它只会添加一个名为的新属性，prop即使prop是变量、参数或具有完全不同内容的其余参数。


有没有办法让...setState({prop...子班分配？

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

4

1 回答 1

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})

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

于 2015-12-13T04:47:10.163 回答