JIYIK CN >

To set data attributes for an element in React , set the attribute directly on the element, e.g. <button data-test-id="my-btn">or use setAttribute()the getData method, e.g. el.setAttribute('data-foo', 'bar')We can access the element on the event object or use 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>
  );
}

If we need to access an element via ref instead of the event object, scroll down to the next section.

We can set attributes data-*directly on an element using the syntax .data

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

Note that we don't use camelCase for custom data-*properties.

This example shows how to use the method in an event setAttribute()to programmatically set or update datathe property.

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

This method requires the following 2 parameters:

• name - the name of the property to be set.
• value - The value to be assigned to the property.

If the attribute already exists on the element, updates the value, otherwise adds a new attribute with the specified name and value.

If you need to remove an attribute from an element, you may use removeAttributethe method.

el.removeAttribute('data-foo');

removeAttributeMethod removes the attribute with the specified name from an element.

If the attribute does not exist on the element, the method returns without throwing an error.

The event's targetproperty gives us a reference to the element (possibly a descendant) that triggered the event.

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
};

The event's currentTargetproperty gives us access to the element the event listener is attached to.

If targetthe property refers to a descendant element in the scene, and we need to access the element the event listener is attached to, simply targetreplace with currentTarget.

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
};

Alternatively, we can use ref to access a DOM element to set its dataattributes.

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>
  );
}

This code example achieves the same result, but we use a ref to access the DOM element.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .currentattributes are initialized to the passed argument.

请注意, we have to access the current property of the ref object to access the button element to which we set the ref attribute.

When we pass a ref prop to an element, for example <button ref={myRef} />, React .currentsets the property of the ref object to the corresponding DOM node.

The ref attribute on currentthe button element gives us access to the button element, so we can ref.current.setAttribute('data-foo', 'bar')set the data attribute on the element using .

Make sure useEffectto access the ref in a hook or when an event occurs, because if we try to access the ref right away, it may not have been set yet, or the element may not be in the DOM yet.