如何在 React 中获取数据属性？答案

【问题标题】：How to get data-attribute in React?如何在 React 中获取数据属性？
【发布时间】：2020-10-07 11:20:12
【问题描述】：

我有这个清单：

    const chosen = (e: any) => console.log(e.target.dataset.value)

...
                <ul>
                  {numbers.map(n => (
                    <a data-value={n} onClick={chosen}>
                      <li key={n}>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

它记录undefined。

也试过这个：console.log(e.target.getAttribute('data-value'))，它返回null。

如何从a 标签中获取值？

堆栈：TypeScript：3.8.3，React：16.13.1

【问题讨论】：

不就是element.getAttribute(attributeName);吗？

标签： javascript html reactjs typescript

【解决方案1】：

在 React 和 Vue 等框架中，您通常尽可能远离从 DOM 读取数据。在这种情况下，您可以在函数中捕获值：


    const chosen = (e: any, value: any) => console.log(value)

...
                <ul>
                  {numbers.map(n => (
                    <a key={n} onClick={(event) => { chosen(event, n); }}>
                      <li>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

【讨论】：

【解决方案2】：

您可以使用以下代码来做到这一点：

export default function App() {
  function chosen(event) {
    const meta = event.target.parentNode.getAttribute("data-value");
    console.log(meta);
  }

  return (
    <ul>
      {numbers.map((n) => (
        <a data-value={n} onClick={chosen}>
          <li key={n}>{n}</li>
        </a>
      ))}
    </ul>
  );
}

【讨论】：

【解决方案3】：

li 元素应包含在a 元素中。请试试这个例子

import React from "react";

const numbers = [1, 2, 3, 4, 5];

function App() {
  function chosen(event) {
    event.preventDefault();

    console.log(event.target.dataset.value);
  }

  return (
    <ul>
      {numbers.map((number) => {
        return (
          <li key={number}>
            <a href="!#" onClick={chosen} data-value={number}>
              {number}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

export default App;

并遵循罗斯艾伦的建议

【讨论】：