React中无法通过event.target.value获取<th>元素的value值问题

你遇到的这个问题其实很常见——<th>标签属于表格表头元素，它并不是原生的表单控件，所以浏览器不会把你设置的value属性当作可通过event.target.value读取的标准属性，自然返回undefined。虽然你能通过直接传参的方式拿到值，但如果想用事件对象获取，这里有几个可行的方案：

方案1：使用HTML5自定义数据属性（推荐） #

把value换成data-value，这是HTML5专门为自定义属性设计的规范，React和浏览器都能很好地支持：

修改你的<th>元素：

<th scope="row" onClick={this.handleClick} data-value="test2">Test</th>

然后在handleClick方法里通过dataset读取：

handleClick(event) {
  const value = event.target.dataset.value;
  this.setState({clicked: value}, () => {console.log(this.state.clicked)});
  console.log("clicked", value); // 会输出"test2"
}

方案2：直接通过getAttribute读取属性 #

如果你不想改属性名，也可以直接用DOM的getAttribute方法获取你设置的value属性：

handleClick(event) {
  const value = event.target.getAttribute('value');
  this.setState({clicked: value}, () => {console.log(this.state.clicked)});
  console.log("clicked", value); // 同样输出"test2"
}

方案3：React的createRef（类组件适用） #

如果是类组件，你也可以给<th>添加ref来直接获取元素，但这种方式相对繁琐，适合需要操作元素其他属性的场景：

首先在constructor里创建ref：

constructor(props) {
  super(props);
  this.state = {};
  this.handleClick = this.handleClick.bind(this);
  this.thRef = React.createRef(); // 创建ref
}

然后绑定到<th>：

<th scope="row" onClick={this.handleClick} value="test2" ref={this.thRef}>Test</th>

最后在handleClick里读取：

handleClick(event) {
  const value = this.thRef.current.getAttribute('value');
  this.setState({clicked: value}, () => {console.log(this.state.clicked)});
}

补充：你提到的直接传参方式 #

虽然你已经知道这个方法，但还是提一下作为备选，这种方式在简单场景下反而更直观：

<th scope="row" onClick={() => this.handleClick("test2")}>Test</th>

然后修改handleClick接收参数：

handleClick(value) {
  this.setState({clicked: value}, () => {console.log(this.state.clicked)});
  console.log("clicked", value);
}

总结一下，最推荐的是方案1，符合HTML规范且代码简洁，方案2则是在不想改动属性名时的快速解决方案。

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