getAttribute 函数并不总是检索属性值答案

【问题标题】：The getAttribute function is not always retrieving the attribute valuegetAttribute 函数并不总是检索属性值
【发布时间】：2022-11-21 11:44:46
【问题描述】：

This 是我在沙盒中做的测试。

如果您运行代码并单击这样的 2 个按钮：first、back、first、back ... 几次，您将在控制台看到目标事件的 name 属性变为 null，即使它在第一次时不为 null我按下那个按钮的时间。

我还在右下角附上了一张带有一些 cmet 的图片，以阐明行为。

这是代码：

  handleSearchChange(event) {
    const target = event.target;
    const name = target.getAttribute("name");
    console.log("Test name " + name + "\n");
  }
  render() {
    return (
      <div>
        <div style={{ height: "30px", width: "30px" }}>
          <FirstSVG name="first_page" onClick={this.handleSearchChange} />
        </div>
        <div style={{ height: "30px", width: "30px" }}>
          <BackSVG name="back_page" onClick={this.handleSearchChange} />
        </div>
      </div>
    );
  }

【问题讨论】：

有时您的点击是在 SVG 中的元素上注册的，而这些元素没有名称属性。我建议使用语义 HTML（比如带有 onClick 事件的按钮），而不是将 onClick 事件分配给具有名称属性的 SVG：see console

标签： reactjs

【解决方案1】：

target 属性指的是事件发起的 dom 元素所以你必须像这样使用 currentTarget ：

handleSearchChange(event) {
    const target = event.currentTarget;
    const name = target.getAttribute("name");
    console.log("Test name " + name + "
");
}

如果您想了解更多有关 target 和 currentTarget 之间区别的信息，请参阅此 here or here

【讨论】：

【解决方案2】：

<svg> 元素只有在点击最里面的项目时才会成为目标。例如，如果您单击 SVG 的 <path> 部分，它将成为目标。

虽然您可以改用 event.currentTarget 来修复它——它将引用监听器附加到的元素，而不是事件被分派到的元素——因为这是 React，更好的方法是不通过 DOM 传递信息根本没有，而是仅通过 JavaScript 来传达它。

例如，你可以有类似的东西：

  makeHandler(name) {
    return () => {
      console.log(name);
    };
  }
  render() {
    return (
      <div>
        <div style={{ height: "30px", width: "30px" }}>
          <FirstSVG onClick={makeHandler("first_page")} />
        </div>
        <div style={{ height: "30px", width: "30px" }}>
          <BackSVG onClick={makeHandler("back_page")} />
        </div>
      </div>
    );
  }

【讨论】：