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

Question

I want to pass the setState method to a functional component and access it from there.

On class component

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

Functional component

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

When trying to change the input while running I'm getting this error: TypeError: Cannot read property 'enqueueSetState' of undefined

I know there can be many workarounds for this and I can implement them but I want to know if this achievable and if not then why.

Answer 1

You should bind the setState function.

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

Answer 2

Avoid using the name that exists in React by default, I would suggest to use some custom name:-

Something similar to what you did but different format

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

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

Functional Component

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

Hope this helps!

FYI, you can still make your changes work if you bind setState method to point to your class only, like

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

But I would not recommend this

Answer 3

You can wrap the setState in a function in parent component and then you can pass function as props to child component. You can refer ReactJS call parent method