Material UI中FlatButton的onClick无法获取value值的问题求助

我之前也碰到过一模一样的问题！正如你通过React开发者工具发现的那样，FlatButton组件会把我们设置的onClick事件绑定在外层容器元素上，但value属性却被加到了内部的原生<button>标签里，所以直接用e.target.value肯定拿不到想要的值。下面给你几个实用的解决方案：

方法1：使用自定义data-*属性 + currentTarget #

把value换成HTML自定义属性data-value，然后在点击事件里通过e.currentTarget获取这个属性值——因为currentTarget就是绑定事件的那个外层容器元素，我们设置的data-*属性会被传递到它上面：

<FlatButton 
  containerElement="button" 
  className="selectedNumberOfPeopleButton" 
  onClick={this.selectedNumberOfPeople} 
  data-value="1" 
  label="Default" 
/>

对应的事件处理函数：

selectedNumberOfPeople = (e) => {
  const targetValue = e.currentTarget.getAttribute('data-value');
  console.log(targetValue); // 输出 "1"
}

方法2：通过闭包直接传递值（最推荐） #

这种方法完全不依赖DOM属性，更符合React的组件思维——在绑定onClick的时候直接把需要的值作为参数传递给事件处理函数：

<FlatButton 
  containerElement="button" 
  className="selectedNumberOfPeopleButton" 
  onClick={() => this.selectedNumberOfPeople("1")} 
  label="Default" 
/>

修改后的事件处理函数：

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

如果是循环生成多个按钮，记得用箭头函数或者bind来确保每个按钮传递的是对应的值，避免闭包陷阱。

方法3：直接获取内部原生按钮（不推荐） #

如果你一定要保留value属性，可以通过React的findDOMNode找到内部的原生按钮元素，但这种方法需要直接操作DOM，不符合React的声明式思维，尽量少用：

import ReactDOM from 'react-dom';

selectedNumberOfPeople = (e) => {
  const innerButton = ReactDOM.findDOMNode(e.currentTarget).querySelector('button');
  console.log(innerButton.value); // 输出 "1"
}

方法4：升级到Material UI新组件（长远方案） #

FlatButton其实是Material UI v0.x版本的组件，在v1及以后的版本里已经被Button组件取代了。新的Button组件会正确把value和onClick绑定到同一个原生按钮元素上，直接用就和原生按钮一样方便：

<Button 
  className="selectedNumberOfPeopleButton" 
  onClick={this.selectedNumberOfPeople} 
  value="1" 
  variant="flat" 
  label="Default" 
/>

这时候事件处理函数里e.target.value就能正常获取到值了。

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