Question

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

我已经对应用程序进行了结构设计，以便拥有一个父组件（App）和一个具有按钮的子组件（Latex）。我想到了使用button标记的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>
    );
}

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

Answer 1

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

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

Answer 2

答案：

使用event.target代替使用event.currentTarget

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

为什么？

event.target 是被单击的东西。因为您的按钮中有一个组件，所以它应该是{em {1}}。

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

Answer 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> ); }

无法将按钮值从子组件传递到父组件

3 个答案:

答案：

为什么？