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

Question

我有这个列表:

    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

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