Question

好吧，我是 React 的新手，我真的很挣扎。我有一组按钮，每个按钮的 id 都是从 Http 请求的结果中分配的。在 onClick 之后，我想通过路由器将该 id 发送到应用程序的不同部分。应该比较容易吧？

<Col>
  <div className="wrapper">
    <Button id={receptura.id} variant="primary" onClick={handleClick(this)}>
      Přejít
    </Button>{" "}
  </div>
</Col>

那是我的按钮我想要这样的东西

function handleClick(e) {
  alert(e.id);
};

真正的解决方案是什么？

Answer 1

您需要像这样在 onClick 函数中传递事件：

onClick={(e) => handleClick(e)}

然后在您的 handleClick 函数中，您可以像这样从事件目标中获取 id：

alert(e.target.id);

示例： https://codesandbox.io/s/relaxed-glade-cv7ce?file=/src/App.js

Answer 2

真的和经典的JS没什么区别。除了，您需要使用 currentTarget 而不是 target 键访问目标 DOM 元素。

const id = e.currentTarget.id

Answer 3

处理它的一种更 React 的方法是使用 useRef()，但在这种情况下，您已准备好获得所点击按钮的引用。你可以直接做：

function handleClick(e) {
    alert(e.target.id);
}

// or if you already have receptura.id in the component simply try
function handleClick(e) {
    alert(receptura.id);
}

你可以在这里阅读更多关于 refs 的内容How to access a DOM element in React? What is the equilvalent of document.getElementById() in React 或在这里的官方文档中 https://reactjs.org/docs/refs-and-the-dom.html

反应 onCLick() 获取按钮 ID

3 个答案: