Javascript 反应-如何获取我单击的按钮元素？

我面临一个问题，不明白为什么我的代码不能工作

重点是：

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

下面是Key.js的代码：

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

export default Key;

我已经找到了解决办法，但如果我理解正确，这不是最好的做法。它正在将Key.js SFC上的onClick事件更改为：

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

然后在我的方法中使用事件属性，如下所示：

handleKeyClick = (letter, event) => { }

有了这个，我可以用event.target点击按钮元素，但是如果我理解正确，会导致性能下降，并且看起来会有更多的麻烦和代码来让我的应用程序按预期工作。

• 我不明白为什么我的箭头功能绑定在 handleKeyClick不允许我访问已单击的HTML元素

非常感谢您的时间和帮助

---

Tom

在这种情况下，不需要访问按钮的元素

您可以通过为函数提供多个参数组来实现它，以便对其进行预配置：

handleKeyClick = (letter) => (ev) => {
    console.log(letter);
    console.log(ev);
};

这个函数需要调用两次才能执行里面的内容。第一个调用将设置

字母

参数，并返回一个只需要事件的函数

现在，您可以在单击函数本身中调用该函数：

LETTERS.map((letter, index) => (
    <Key letter={letter} onClick={this.handleKeyClick(letter)} key={index} />
))

LETTERS.map（（字母，索引）=>(
))

不会直接调用处理程序，此参数仅设置函数中的字母变量

以下是通过将事件直接发送到函数来获取事件信息的方法：

<button className={`keyboardLetter`} onClick={onClick} >{ letter }</button>

{letter}

---

您以前忽略了

onClick

返回的事件，该事件位于其第一个参数中：

onClick={（/*事件变量missing*/）=>onClick（letter）}

在

Key.js

文件中，如果您想稍后访问它，需要发送该事件

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

将

单击事件

和

字母

传递给您的

handleKeyClick

功能

const handleKeyClick = (e, letter) => {
   console.log(letter);
   console.log(e.target);
};

LETTERS.map((letter, index) => (
  <Key letter={letter} onClick={(e, letter) => this.handleKeyClick(e, letter)} key={index} />
))

LETTERS.map（（字母，索引）=>(
this.handleKeyClick（e，字母）}key={index}/>
))

const Key=（{letter，onClick}）=>(
onClick（e，letter）}>{letter}
);
handleKeyClick=（e，字母）=>{
调试器
//事件
//书信
}
render（）{
让字母=[“a”，“b”]
返回(
{
字母.map（（字母，索引）=>(
{this.handleKeyClick（e，字母）}}key={index}/>
))
}
);
}

您尝试过REF吗？我将进入裁判，但现在我不认为我需要它，因为我正在遵循一个教程，我们将在本次活动后看到裁判。你不认为我现在的代码还有另一种可能性吗？您能否确认我所做的变通方法不是良好的做法？首先，谢谢你的回答。不幸的是，console.log（letter）和console.log（ev）返回相同的内容：button元素中的字母。我仍然无法访问HTML按钮元素（ev.target、currentTarget或.parentElement仍然返回未定义）抱歉，我想我误读了有关获取按钮参考的问题。我编辑了我的答案。出于好奇，您为什么需要按钮参考？您的解决方案非常有效，谢谢。但是，在性能和维护/可用性方面，在我的问题末尾所示的变通方法（使用onClick中返回的事件作为第一个参数）和使用您的技术之间，您认为哪一种方法最好？我需要得到按钮的ref来检查它的一些属性（classList.contains（），诸如此类的东西），非常感谢您将我连接到钩子上！！对我来说，用钩子/函数组件编写代码比用类编写代码要好。真正的游戏规则改变者！非常感谢您在这个方向上指出我这就像我在问题末尾发布的解决方法，除了使用它，我不需要将单击事件和字母传递给我的handleKeyClick函数（正如您在最后一步中提到的）。使用此解决方法，它可以处理onClick={this.handleKeyClick}，而不传递任何参数。如果我通过了参数，如果我不通过，会有什么区别？另外，这不是导致性能下降吗？这就像我在问题的最后展示的解决方法一样。但是，使用这种技术，在App.js的render（）中，我可以像这样使用它：onClick={this.handleKeyClick}，没有参数或函数调用它。这两者之间有什么区别？非常感谢，如果要传递两个以上的值，则必须使用这种方式。onClick={（e）=>{this.handleKeyClick（e，letter）}}这意味着方法中有一个方法。谢谢，这不会让组件每次都觉得它有了一些新的不同的道具吗？导致它重新渲染，即使它是多余的？有更好的方法吗？请查看下面的YouTube视频。这段视频解决了按钮点击功能的性能问题，这对我来说也是一个新信息，谢谢。

const handleKeyClick = (e, letter) => {
   console.log(letter);
   console.log(e.target);
};

LETTERS.map((letter, index) => (
  <Key letter={letter} onClick={(e, letter) => this.handleKeyClick(e, letter)} key={index} />
))

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

 handleKeyClick = (e, letter) => {
        debugger
        //e -- event
        //letter 
    }

  render() {
        let LETTERS = ["a", "b"]
        return (
            <Fragment>
                <div className="keyboard">
                    {
                        LETTERS.map((letter, index) => (
                            <Key letter={letter} onClick={(e) => { this.handleKeyClick(e, letter) }} key={index} />
                        ))
                    }
                </div>
            </Fragment>
        );
    }