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

发布于11月21日

This是我在沙箱里做的测试.

如果您运行代码并像这样单击两个按钮:First、Back、First、Back...有几次，您会在控制台上看到目标事件的名称属性变成了空，即使我第一次按下该按钮时它不是空的.

我还附上了一张图片，右下角有一些 comments ，以澄清这种行为.

代码是这样的:

  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>元素是点击的最里面的项时，它才会成为目标.例如，如果您点击SVG的第<path>部分，它将成为目标.

虽然您可以使用event.currentTarget来修复它-它将引用侦听器附加到的元素，而不是事件被分派到的元素-但由于这是Reaction，一个更好的方法是根本不通过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>
    );
  }