Javascript 按钮上的图标不允许访问Id_Javascript_Reactjs_Font Awesome

Javascript 按钮上的图标不允许访问Id

javascript reactjs

Javascript 按钮上的图标不允许访问Id,javascript,reactjs,font-awesome,Javascript,Reactjs,Font Awesome,我正在我的项目中使用react Fontsomeous。在我的组件的render功能下，我有以下功能将学校映射到页面上，然后我需要一个带有编辑图标的按钮来执行操作。我的按钮代码如下所示： { this.state.myschools.map( (school) => ( <Row key={school.id}> <Col><p>{school.name}</p></Col>

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

      { 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>
        ))}

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

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

有人能帮忙吗？

好吧，这是你在与React共事期间所学到的常见陷阱之一。放心吧，我们都掉进了这个坑里

这里没有什么令人愉快的时刻

1st Aha:React没有一种通常的方式让您在事件中获取元素属性（在您的示例中是

）

也就是说，您仍然可以通过

e.target

访问

按钮

元素，并使用JavaScript获取属性

解决方案#1 JavaScript getAttribute

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

e、目标将是您单击的HTML元素，我们可以使用JavaScript方法获取属性。（请注意，Javascript方式不是反应方式）

但是还有另一种方法，你会更经常地看到这种方法

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

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

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时所学到的常见陷阱之一。放心吧，我们都掉进了这个坑里