react 组件怎么公用_如何从react组件中提取公共逻辑(但公共逻辑使用setState)

我正在用react构建一个应用程序。我已经使用react 2.5年了,但这是我第一次真正开始测试。因此,我从组件中删除了同样多的逻辑。这其中的大部分非常简单,因为对于大多数逻辑来说,用纯函数来思考是很容易的。

问题

我发现自己在不同的组件中重用了一个特定的方法,因为它是我的输入字段处理程序。在我第三次复制粘贴之后,我想一定有一个更干净的解决方案。

此函数当前以完全相同的方式存在于我的3个组件中

/**

* @description

* Returns a function that updates the state form

*

* @param {String} stateKey - key in the state to update

* @returns {Function}

*/

@autobind

updateInputValue (prop) {

return (event) => {

this.setState({ [prop]: event.target.value });

}

};

我试过的

this

对它来说就像一个变量,它起作用了,但我想知道是否有一个更干净的方法来做它。

/**

* @description

* Returns a function that updates the state of the filter form

*

* @param {Object} componentThis - The components context

* @param {String} stateKey - key in the state to update

* @returns {Function}

*/

function updateInputValue (componentThis, stateKey) {

return (event) => {

componentThis.setState({ [stateKey]: event.target.value });

}

}

然后在输入中

value={this.state.foo}

onChange={updateInputValue(this, 'foo')} />

我想知道这个问题是否还有其他解决方案?