在 React 的 onclick 函数中访问 <a> 标签

Question

我有一个 React 代码，我在其中放置了带有 onClick 功能的 <a> 标签。当我单击此组件时，在 onClick 函数中我想访问 <a> 标记本身并设置它的 href 值。目前我是这样做的：

render(): React.ReactNode {
    return (
        <a href='#' onClick={ () => this.clicked() } id = { 'btn_id' } />
    )
}

private clicked() {
    const a = document.getElementById("btn_id") as HTMLAnchorElement;

    a.href = "new_link";
}

这工作正常，但我不想使用 getElementById 调用来访问该组件。还有其他方法吗？

Answer 1

您不需要使用 document.getElementById()。您可以从 event 对象访问事件目标元素，如下所示：

render(): React.ReactNode {
    return (
        <a href='#' onClick={ (e) => this.clicked(e) } id = { 'btn_id' } />
    )
}

private clicked(e) {
    const a = e.target as HTMLAnchorElement;

    a.href = "new_link";
}

在 React 的 onclick 函数中访问 <a> 标签

Access <a> tag inside onclick function in React

html

javascript

onclick

reactjs