React-如何获得我点击的按钮元素?

我遇到问题,不明白为什么我的代码无法正常工作。

要点:

  • 我有一系列按钮,每个按钮代表键盘键,每个按钮的内容是键盘键“值”(A,B,C,D等)
  • 我有一个名为Key.js的SFC,它创建了一个与给定字母关联的按钮(在外部组件函数中完成)
  • 在App.js的render()函数中,我映射LETTERS(包含从A到Z的所有字母的数组)以创建按钮列表
  • 当我单击一个按钮时,我想要获得与之关联的字母(这是我做过的),但也希望单击HTML按钮元素(以检查特定属性等)。这就是问题

这是Key.js的代码:

const Key = ({ letter, onClick }) => (
    <button className={`keyboardLetter`} onClick={() => onClick(letter)} >{ letter }</button>
);

export default Key;

这是在App.js中渲染它的代码:

render() {
    return (
        <div className="keyboard">
            {
                // LETTERS is an array containing letters from A to Z
                LETTERS.map((letter, index) => (
                    <Key letter={letter} onClick={this.handleKeyClick} key={index} />
                ))
            }
        </div>
    )
}

这是handleKeyClick方法的代码:

// Arrow function for binding
handleKeyClick = (letter) => {

    // Here I do several operations for my app to work (setState() etc…)

    // I can get the letter I clicked by doing :
    console.log(letter);

    // The point is I can not retrieve the HTML button element clicked, even with :
    console.log(letter.target) // returns undefined

    // Neither can I with letter.currentTarget, .parentElement or .parentNode (all return undefined)

};

我找到了一种解决方法,但是如果我理解正确的话,这不是一件好事。它将Key.js SFC的onClick事件更改为:

onClick={(event) => onClick(letter, event)}

然后在我的方法中像这样使用event属性:handleKeyClick(letter,event)

有了这个,我可以用event.target来单击按钮元素,但是如果我理解正确的话,将会导致性能降低,并且似乎更多的麻烦和代码使我的App能够按需工作。

我不明白为什么我与handleKeyClick上的箭头功能绑定后无法让我进入被单击的HTML元素?

非常感谢您的时间和帮助。

汤姆

评论