React.js中Material UI按钮onClick属性失效问题求助

嘿，我来帮你排查下这个问题！之前普通<button>能用，换成RaisedButton就失效，主要有两个常见原因，我给你对应解决方案：

核心原因分析 #

普通HTML按钮的value属性是原生支持的，你可以通过event.target.value直接获取，但Material UI的RaisedButton是封装后的自定义组件：

1. 它本身不接收value作为props，你直接加的value="1"不会被传递到底层的DOM按钮上
2. 如果你的事件处理函数没有正确绑定this，也可能导致点击时无法触发预期逻辑

解决方案1：直接传递参数（最推荐） #

不用依赖event.target.value，而是通过箭头函数直接把需要的数值传给处理函数，这样完全避开组件封装的限制：

第一步：修改RaisedButton的onClick #

<RaisedButton 
  className="selectedNumberOfPeopleButton" 
  onClick={() => this.selectedNumberOfPeople(1)}
  label="1" // 用label属性设置按钮显示的文字
/>

第二步：调整你的处理函数 #

让它直接接收参数，而不是从event里取：

selectedNumberOfPeople = (peopleCount) => {
  console.log(peopleCount); // 点击后会输出1
}

解决方案2：给底层按钮传递value属性 #

如果你坚持想用event.target.value的方式，可以通过RaisedButton的buttonProps属性，把value传递给它内部的原生<button>元素：

<RaisedButton 
  className="selectedNumberOfPeopleButton" 
  onClick={this.selectedNumberOfPeople}
  label="1"
  buttonProps={{ value: "1" }} // 把value传给底层按钮
/>

然后你的原处理函数就能正常拿到值了：

selectedNumberOfPeople = (event) => {
  console.log(event.target.value); // 输出"1"
}

额外检查：确保this绑定正确 #

如果上面的方法还是不行，检查下你的selectedNumberOfPeople函数是否正确绑定了this：

• 要么在组件构造函数里手动绑定：

constructor(props) {
  super(props);
  this.selectedNumberOfPeople = this.selectedNumberOfPeople.bind(this);
}

• 要么用类字段箭头函数定义方法（自动绑定this）：

selectedNumberOfPeople = (event) => {
  // 函数逻辑
}

内容的提问来源于stack exchange，提问作者tibewww