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

Props are Read-Only

无论您将组件声明为函数还是类，它都绝不能修改其自身的道具

您应该只通过"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}/>
   })
}

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>

在ReactJs中，将onclick功能与setState一起使用时，如何传递参数？

5 个答案:

Props are Read-Only