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

我有以下清单：

    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>
...

const selected=（e:any）=>console.log（e.target.dataset.value）
...

{numbers.map（n=>(

{n}

))}

...

它记录未定义的

还尝试了以下操作：

console.log（e.target.getAttribute（'data-value'））

并返回

null

如何从

标记中获取值

Stack:TypeScript:3.8.3，React:16.13.1
在React和Vue之类的框架中，如果可能，您通常不会从DOM读取数据。在这种情况下，您可以在函数中捕获值：


const selected=（e:any，value:any）=>console.log（value）
...

{numbers.map（n=>(
{选择（事件，n）；}}>

{n}

))}

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

从“React”导入React；
常量数=[1,2,3,4,5]；
函数App（）{
选择的功能（事件）{
event.preventDefault（）；
log（event.target.dataset.value）；
}
返回(

{number.map（（number）=>{
返回(


);
})}

);
}
导出默认应用程序；

并遵循Ross Allen的建议
您可以使用以下代码执行此操作：

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

导出默认函数App（）{
选择的功能（事件）{
const meta=event.target.parentNode.getAttribute（“数据值”）；
console.log（meta）；
}
返回(

{number.map（（n）=>(
{n}
))}

);
}
它不仅仅是
元素.getAttribute（attributeName）？