在 ReactJs 中使用 onclick 函數和 setState 時，如何傳遞參數？

Question

就我而言，我使用的按鈕很少，當單擊按鈕時，視圖應該會發生變化。 對於視圖，我為每個按鈕單擊使用相同的面板，更改將應用​​於面板的標題（公司名稱）。 要更改名稱，我使用 Onclick 方法發送參數，如下所示。

class View extends Component {
    constructor(props){
        super(props)
        this.state ={
            message: <Content name="ABC"/>
        }
    }

    changeStateMSG(prevStep,props){
        this.setState({
            message:<Content name={this.props.name}/>
        })
    }
    render() { 
        return ( 
            <div className="row">
            <div className="mr-sm-3">
            <div style={{ width: '18rem', marginTop: '20px' }}>

              <Button onClick={() => this.changeStateMSG(this.props.name="XYZ")} variant="secondary" size="lg" block >
                    Omobio
              </Button>

              <div className="mr-sm-9">
                  <p>{this.state.message}</p>
              </div>

.... 當我傳遞像上面這樣的參數 (this.props.name="XYZ") 我收到錯誤為“TypeError：無法添加屬性名稱，對象不可擴展”。 希望有人能幫助我

Answer 1

你不能像反應文檔所說的那樣改變props

道具是只讀的

無論您將組件聲明為函數還是類， 都不得修改其自身的道具

您應該只傳遞"XYZ" 。 或者您可以使用傳播運算符傳遞name:'XYZ' this.props對象。

onClick={() => this.changeStateMSG({...this.props,name:"XYZ"})}

並改變你的功能

changeStateMSG(prevStep){
        this.setState({
            message:<Content name={prevState.name}/>
        })
    }

如果您不希望函數中包含所有props對象，則只需傳遞"XYZ" 。

onClick={() => this.changeStateMSG("XYZ")}

並改變你的功能

changeStateMSG(name){
   this.setState({
            message:<Content name={name}/>
   })
}

Answer 2

this.props是View從其父級收到的內容。 您不能為其設置值。 改用：

onClick={() => this.changeStateMSG("XYZ")}

和

changeStateMSG(value){
    this.setState({
        message:<Content name={value}/>
    })
}

Answer 3

您檢查過文檔了嗎？ 我相信錯誤明確指出您無法將屬性添加到this.props 。

您可以僅使用此語句傳遞參數，就像在常規函數執行中一樣。

<Button 
  onClick={() => this.changeStateMSG("value_first_argument", "value_ second_argument")}
  variant="secondary"
  size="lg"
  block >
  Omobio
</Button>

您的函數定義應如下所示：

changeStateMSG(prevStep, props){
        this.setState({
            message:<Content name={this.props.name}/>
        })
    }

Answer 4

為什么你必須將傳遞props.name到changeStateMSG功能時，你可以從該函數訪問它？ 只需在changeStateMSG調用它並刪除不使用的參數即可。

changeStateMSG(){
    this.setState({
        message:<Content name={this.props.name}/>
    })
}

...
onClick={this.changeStateMSG}

Answer 5

問題是函數this.changeStateMSG（this.props.name =“ XYZ”）。 U是否傳遞了變量prevStep。 這樣的U傳遞（this.props.name =“ XYZ”）是錯誤的方式。 應該編輯：

render() { 
     const prevStep = 1;
     return ( 
        <div className="row">
          <div className="mr-sm-3">
            <div style={{ width: '18rem', marginTop: '20px' }}>

              <Button onClick={() => this.changeStateMSG(prevStep, {name:'XYZ'})}  variant="secondary" size="lg" block >
                    Omobio
              </Button>