无法将 Button 值从子组件传递到父组件答案

【问题标题】：Unable to pass Button value from Child to Parent component无法将 Button 值从子组件传递到父组件
【发布时间】：2019-08-02 19:33:21
【问题描述】：

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

我已经构建了我的应用程序，因此我有一个父组件 (App)，它有一个子组件 (Latex)，它有按钮。我想过使用按钮标签的 value 属性在“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>
    );
}

所以，在单击按钮时，我得到的输出是<span class="mrel amsrm">...</span>，而不是<button value={latexSymbols[0]}>...</button>。我假设这就是 react-katex 包呈现乳胶符号的方式。但这让我感到困惑，因为符号不是事件的目标，按钮是。有没有办法解决这个问题？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

答案：

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

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

为什么？

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

event.currentTarget 是实际上附加了event listener 的东西。在这种情况下，button。

【讨论】：

【解决方案2】：

target 并不总是指附加了处理程序的元素（它指的是触发click 的元素）。您应该使用currentTarget，它表示事件侦听器附加到的元素。

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

【讨论】：

【解决方案3】：

你可以这样做 buttonClick 是一个回调函数，如果您需要一个值，只需传递按钮值而不是事件，以防您同时需要按钮值和事件
onClick={(event) => buttonClick(event, latexSymbols[0])} 使用类似的东西

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

【讨论】：