是否可以將 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 調用父方法