按钮上的 React Fontawesome 图标不允许访问 ID

Question

我在我的项目中使用 React fontawesome。在我的组件的渲染功能下，我有以下将学校映射到页面上的功能，然后我想要一个带有编辑图标的按钮来执行操作。我的按钮代码如下所示：

      { this.state.myschools.map( (school) => (
          <Row key={school.id}>
            <Col><p>{school.name}</p></Col>
            { school.deaths.length > 0 ? <Col md="2"><button id={school.id} className="likelink" onClick={this.goToSchoolDeathList}>View Deaths</button></Col> : <Col md="2"></Col> }
            <Col><button id={school.id} onClick={this.editSchool}><FontAwesomeIcon icon={faEdit} /></button></Col>
          </Row>
        ))}

editSchool 函数如下：

  editSchool(e) {
      console.log("School Id");
      console.log(e.target.id);
  }

如果我点击 font awesome 图标周围的空白 space，则 ID 会记录到控制台。如果我只单击图标退出的区域，则不会记录 id。我希望用户能够单击按钮的任何部分（包括 fa 图标）并捕获学校 ID。

我已经尝试将 onClick 事件和 id 属性添加到 "FontAwesomeIcon" 组件，但仍然不起作用。

有人可以帮忙吗？

Answer 1

好吧，这是您在使用 React 期间学到的常见陷阱之一。放心，我们都掉过这个坑了

这里几乎没有顿悟时刻。

1st Aha: React 没有通常的方法让您在事件中获取元素属性（在您的示例中为 e）。

也就是说，您仍然可以通过 e.target 访问 button 元素并使用 JavaScript 获取属性。

解决方案 #1 JavaScript getAttribute

editSchool(e) {
  console.log("School Id");
  console.log(e.target.getAttribute('id'));
}

e.target就是你点击的HTML元素，我们可以用JavaScript的方式获取属性。（请注意，Javascript方式不是React方式）

但还有另一种方式，您会更频繁地看到这种方式。

解决方案 #2 您可以直接在渲染中定义一个函数

<button id={school.id} onClick={e => this.editSchool(school.id)}>

请注意这个又一个陷阱，

2nd Aha: 将 onClick 绑定到函数，而不是函数的结果。

不要这样做

<button id={school.id} onClick={this.editSchool(scholl.id)}> // This is incorrect

问题是 onClick prop 期望有人点击时调用一个函数。

第一个我们定义了一个函数e => this.editSchool(school.id)并且将onClick绑定到新定义的函数上。

而第二种，我们只是将 onClick 绑定到函数 this.editSchool(school.id) 的 "result"，这不是函数。

按钮上的 React Fontawesome 图标不允许访问 ID

React Fontawesome Icon on Button not Allowing Id to be Accessed

javascript

font-awesome

reactjs