javascript - 无法将 Button 值从子组件传递到父组件

Question

我试图创建一个非常小的 React 应用程序，它有一个带有 latex 符号的按钮，单击该按钮时，会显示如何在 latex 中包含该符号。我正在使用 npm 包(“react-katex”)在浏览器上呈现 latex 代码。按钮呈现良好，但当我点击按钮时，我没有得到想要的结果。

我已经构建了我的应用程序，因此我有一个父组件 (App)，它有一个子组件 (Latex)，子组件 (Latex) 有按钮。我想到了使用按钮标签的值属性在“onClick”事件中将值传递给父级。这样，在 onClick事件处理程序，我可以使用 event.target.value属性来实现我的目的。然而，event.target当我运行程序时甚至没有提到按钮。这是一段代码:

对于 App 组件:

constructor(){
    super();
    this.state = {
        symbolName: ''
    };
}

onButtonClick = (event) => {
    console.log(event.target)
}

render(){
    return(
        <div className='tc'>
            <Latex buttonClick={this.onButtonClick}/>
            <h1> {this.state.symbolName} </h1>
        </div>
    );
}

对于 Latex 组件:

const Latex = ({ buttonClick }) => {
    return (
        <div className='tc'>
            <button onClick={buttonClick} value={latexSymbols[0]}>
                <InlineMath>
                    {latexSymbols[0]}
                </InlineMath>
            </button>
        </div>
    );
}

所以，点击按钮，而不是得到类似 <button value={latexSymbols[0]}>...</button> 的东西，我得到的输出是 <span class="mrel amsrm">...</span> .我假设这就是 react-katex 包呈现 latex 符号的方式。但这让我感到困惑，因为符号不是事件的目标，按钮才是。是否有解决此问题的方法？

Answer 1

回答:

而不是使用 event.target 使用 event.currentTarget

onButtonClick = (event) => {
    console.log(event.currentTarget)
}

---

为什么？

event.target 是被点击的东西。因为您的按钮内有一个组件，所以它将是那个组件，而不是按钮。

event.currentTarget 是实际附加了 event listener 的东西。在本例中，按钮。

---