Question

我有一个简单的应用程序，将跟踪许多不同的状态。

我意识到我可以创建类似......的功能。

   changeSomething = (nameOfState) => {
     this.setState({nameOfState});
   }

我将为this.state.nameOfState提供可重用的功能。在这种情况下，我需要为许多状态设置可重用的功能。这是最初的b / c，我只有3个州，所以我不在乎。现在我将有大约10个setstate函数，所以复制和粘贴10次是没有意义的。我应该能够创建一个可重用的函数，它将状态名称和值作为参数并设置它们。

Answer 1

您可以使用方括号dynamically create prop name。

 changeSomething = (nameOfState, value) => {
     this.setState({[nameOfState]: value});
   }

然后在将函数绑定到事件时定义您的道具名称。例如：

<SomeComponent onChange={this.changeSomething.bind(null, 'propName')} />

这是JSFiddle的例子：https://jsfiddle.net/g64jx6dn/1/

Answer 2

您可以这样做：

changeSomething = (stateName, value) => {
     this.setState({[stateName]: value});
}

Answer 3

将param作为对象发送，状态名称作为值的键。

例如：

changeSomething({ yourStateName: yourValue }) // function called with parameters as object
changeSomething = (stateValue) => {
    this.setState ({ stateValue });
}

使用react，如何创建一个函数来设置将状态名称和值作为参数的状态？

3 个答案: