javascript - 在ReactJs中，当使用onclick函数和setState时，如何传递参数？

Question

就我而言，我使用了几个按钮，当单击按钮时， View 应该会发生变化。对于 View ，我对每个按钮单击使用相同的面板，并且更改将应用​​于面板的标题(公司名称)。要更改名称，我使用 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 正如 react 文档所述

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props

您应该只传递“XYZ”。或者您可以使用扩展运算符通过 this.props 和 name:'XYZ' 传递对象。

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}/>
   })
}