是否可以将 setState 方法作为道具传递？

Question

我想将 setState 方法传递给功能组件并从那里访问它。

在 class 组件上

<InputRender name2={this.state.name2} setState={this.setState}/>

功能组件

import React from 'react';
export const InputRender=(props)=>{
return(
        <input
        type="text"
        onChange={(e) => { props.setState({ name2: e.target.value }); }}
        value={props.name2} />
    )
}

在运行时尝试更改输入时出现此错误： TypeError: Cannot read property 'enqueueSetState' of undefined

我知道可以有很多解决方法，我可以实现它们，但我想知道这是否可以实现，如果不能那么为什么。

Answer 1

您应该绑定 setState function。

setState={this.setState.bind(this)}

Answer 2

避免使用默认存在于 React 中的名称，我建议使用一些自定义名称：-

与您所做的类似，但格式不同

_updateName = (newName) => {
  this.setState({ name2: newName });
}

<InputRender name2={this.state.name2} updateName={this._updateName}/>

功能组件

import React from 'react';
export const InputRender=(props)=>{
return(
        <input
        type="text"
        onChange={(e) => { props.updateName(e.target.value); }}
        value={props.name2} />
    )
}

希望这可以帮助！

仅供参考，如果您将setState方法绑定为仅指向您的 class ，您仍然可以使您的更改生效，例如

<InputRender name2={this.state.name2} setState={this.setState.bind(this)}/>

但我不推荐这个

Answer 3

您可以将 setState 包装在父组件的 function 中，然后您可以将 function 作为道具传递给子组件。 可以参考ReactJS 调用父方法