React中如何在事件处理函数中访问DOM元素的属性与值？

看起来你在React里处理键盘事件时遇到了获取data属性的问题，咱们来一步步拆解错误原因，然后给出几种靠谱的解决方案：

先说说你的代码为什么报错 #

1. e.getAttribute报错：这里的e是键盘事件对象（KeyboardEvent），不是DOM元素本身，事件对象根本没有getAttribute方法，所以肯定会报错。
2. document.getElementById('search')的问题：虽然这种方式偶尔能拿到DOM元素，但React的设计理念是尽量避免直接操作DOM，而且如果你的组件被复用多次，多个相同id的元素会导致获取到错误的元素，甚至可能在组件还没完成挂载时获取到null，同样会触发getAttribute未定义的错误。
   另外还要提一句：你写的input标签里onKeyUp={this.keyUpFn}"多了一个末尾的引号，这会导致语法错误，记得删掉哦。

解决方案一：通过事件对象的target获取DOM元素（最简单） #

事件对象的target属性就是触发事件的那个DOM元素，直接用它来获取data属性就行：

// 修正后的input写法
<input 
  type="text" 
  id="search" 
  data-id={form.id} 
  value={form.name} 
  placeholder="Search..." 
  name="id" 
  onKeyUp={this.keyUpFn}
/>

keyUpFn(e) {
  // 从事件对象拿到触发事件的input元素
  const inputElement = e.target;
  // 方式1：用getAttribute
  const value1 = inputElement.getAttribute('data-id');
  // 方式2：用dataset更简洁（推荐）
  const value2 = inputElement.dataset.id;
  
  console.log(value1);
  console.log(value2);
}

注意：如果是class组件，要确保keyUpFn的this指向正确，要么在constructor里绑定：

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

要么用箭头函数定义方法：

keyUpFn = (e) => {
  // 这里的this会自动绑定到组件实例
  const inputElement = e.target;
  // ...剩下的代码
}

解决方案二：使用React Refs（适合需要直接操作DOM的场景） #

如果需要在其他地方也访问这个input元素，可以用React的refs来获取：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref
    this.searchInputRef = React.createRef();
    // 绑定this
    this.keyUpFn = this.keyUpFn.bind(this);
  }

  keyUpFn(e) {
    // 通过ref的current属性拿到DOM元素
    const inputElement = this.searchInputRef.current;
    const value1 = inputElement.getAttribute('data-id');
    const value2 = inputElement.dataset.id;
    
    console.log(value1);
    console.log(value2);
  }

  render() {
    const { form } = this.state; // 假设form在state里
    return (
      <input 
        type="text" 
        ref={this.searchInputRef} // 把ref绑定到input
        data-id={form.id} 
        value={form.name} 
        placeholder="Search..." 
        name="id" 
        onKeyUp={this.keyUpFn}
      />
    );
  }
}

解决方案三：直接使用组件的state/props（最符合React理念） #

既然data-id的值是form.id，而form应该是组件的state或者props中的数据，那完全没必要从DOM元素里取，直接用组件内部的数据就行：

keyUpFn(e) {
  // 如果form在state里
  const value = this.state.form.id;
  // 如果form是props传进来的
  // const value = this.props.form.id;
  
  console.log(value);
}

这种方式完全绕开了DOM操作，符合React单向数据流的设计思想，是最推荐的做法。

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