React技巧之设置data属性

React 2年前 607

总览

在React中，为元素设置data属性的话，直接在元素上设置属性即可。比如说，<button data-test-id="my-btn"> ，或者使用setAttribute() 方法。比如说，el.setAttribute('data-foo', 'bar') 。你可以在event对象上或者使用ref来访问元素。

export default function App() {
  const handleClick = event => {
    console.log(event.target.dataset);

    // ?️ "my-btn"
    console.log(event.target.getAttribute('data-test-id'));

    // ?️ set attribute
    event.target.setAttribute('data-foo', 'bar');
    console.log(event.target.getAttribute('data-foo')); // ?️ bar

    event.target.setAttribute('data-foo', 'baz');
    console.log(event.target.getAttribute('data-foo')); // ?️ baz
  };

  return (
    <div>
      {/* ?️ set data-test-id attribute */}
      <button onClick={handleClick} data-test-id="my-btn">
        Click
      </button>
    </div>
  );
}

React技巧之设置data属性

如果你需要通过ref而不是通过event对象来访问元素，请往下翻阅。

event对象

我们可以通过data-* 语法来直接在元素上设置data属性。

<button onClick={handleClick} data-test-id="my-btn">
  Click
</button>

需要注意的是，我们不要驼峰命名自定义data-* 属性。

这个例子向我们展示了如何在事件中，以编程方式来使用setAttribute()方法进行设置或者更新data属性。

event.target.setAttribute('data-foo', 'bar');

该方法接收以下两个参数：

name – 要设置的属性的名称。
value – 赋值给属性的值。

如果属性已经存在于元素上，那么属性值将会被更新。否则将添加具有指定名称和值的新属性。

如果需要从元素上移除一个属性，可以使用removeAttribute方法。

el.removeAttribute('data-foo');

removeAttribute方法从元素中删除具有指定名称的属性。如果元素上不存在该属性，那么此方法直接返回而不抛出错误。

event上面的target属性给了我们一个对触发事件的元素的引用（可以是后代元素）。

const handleClick = event => {
  console.log(event.target.dataset);

  // ?️ "my-btn"
  console.log(event.target.getAttribute('data-test-id'));

  // ?️ set attribute
  event.target.setAttribute('data-foo', 'bar');
  console.log(event.target.getAttribute('data-foo')); // ?️ bar

  event.target.setAttribute('data-foo', 'baz');
  console.log(event.target.getAttribute('data-foo')); // ?️ baz
};

而event上的currentTarget属性让我们访问事件监听器所连接的元素。

如果target属性在你的方案中指的是一个子元素，而你需要访问事件监听器所连接的元素，只需用currentTarget替换target。

const handleClick = event => {
  console.log(event.currentTarget.dataset);

  // ?️ "my-btn"
  console.log(event.currentTarget.getAttribute('data-test-id'));

  // ?️ set attribute
  event.currentTarget.setAttribute('data-foo', 'bar');
  console.log(event.currentTarget.getAttribute('data-foo')); // ?️ bar

  event.currentTarget.setAttribute('data-foo', 'baz');
  console.log(event.currentTarget.getAttribute('data-foo')); // ?️ baz
};

useRef

另外，你也可以使用ref来访问DOM元素，来设置其data属性。

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.dataset);

    // ?️ "my-btn"
    console.log(ref.current.getAttribute('data-test-id'));

    // ?️ set attribute
    ref.current.setAttribute('data-foo', 'bar');
    console.log(ref.current.getAttribute('data-foo')); // ?️ bar

    ref.current.setAttribute('data-foo', 'baz');
    console.log(ref.current.getAttribute('data-foo')); // ?️ baz
  };

  return (
    <div>
      <button ref={ref} onClick={handleClick} data-test-id="my-btn">
        Click
      </button>
    </div>
  );
}