Javascript 列表中特定元素的ReactJS中的EventHandle

我有一个组件，在这个组件中，我进行一个API调用，得到一个作为对象数组的响应。然后我通过它进行映射，并将数据打印为行和列，如下所示：

{
  this.state.listUser.map((list, index) => {
    return (
      <tbody key={index}>
        <tr>
          <th>{list.first_name}</th>
          <th>{list.last_name}</th>
          <th>
            <img id={index} src={list.avatar} onClick={this.showEmailAddress} />
          </th>
          {this.state.showEmail && <th>{list.email}</th>}
        </tr>
      </tbody>
    );
  });
}

您可以这样做： 这里有一个工作链接：

问题是您针对每个项目显示了

电子邮件。它应该有条件地显示，尽管只针对单击的项目

因此，创建了一个数组
showList:[]
，它将包含需要显示的项目并设置条件
{this.state.showList.includes（list.id）和&list.email}
需要显示的位置

import React from "react";
import axios from "axios";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      listUser: "",
      showEmail: "",
      showList: []
    };
  }

  showEmailAddress(item) {
    debugger;
    this.setState({ showEmail: item.email });
    var list = this.state.showList;
    list.push(item.id);
    this.setState({showList: list})
  }

  componentDidMount() {
    axios
      .get("https://reqres.in/api/users?page=2")
      .then(res => {
        console.log(res.data.data);
        this.setState({ listUser: res.data.data });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    if (!this.state.listUser) {
      return <div>...loading</div>;
    }

    return (
      <div>
        <thead>
          <tr>
            <th>first_name</th>
            <th>last_name</th>
            <th>avatar</th>
          </tr>
        </thead>
        {this.state.listUser.map((list, index) => {
          return (
            <tbody key={index}>
              <tr>
                <th>{list.first_name}</th>
                <th>{list.last_name}</th>
                <th>
                  <img
                    alt="test"
                    id={index}
                    src={list.avatar}
                    onClick={this.showEmailAddress.bind(this, list)}
                  />
                  <span>{this.state.showList.includes(list.id) && list.email}</span>
                </th>
              </tr>
            </tbody>
          );
        })}
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“axios”导入axios；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
列表用户：“”，
showEmail:“，
展示清单：[]
};
}
showEmailAddress（项目）{
调试器；
this.setState（{showmail:item.email}）；
var list=this.state.showList；
list.push（item.id）；
this.setState（{showList:list}）
}
componentDidMount（）{
axios
.get（“https://reqres.in/api/users?page=2")
。然后（res=>{
console.log（res.data.data）；
this.setState（{listUser:res.data.data}）；
})
.catch（错误=>{
控制台日志（err）；
});
}
render（）{
如果（！this.state.listUser）{
返回…加载；
}
返回(
名字
姓
阿凡达
{this.state.listUser.map（（列表，索引）=>{
返回(
{list.first_name}
{list.last_name}
{this.state.showList.includes（list.id）&&list.email}
);
})}
);
}
}
导出默认应用程序；
您只需在单击图像时管理状态，就可以切换您的

请看一看，我希望它对你有用

谢谢

{this.state.listUser.map((list, index) => {
      return (
        <tbody key={index}>
          <tr>
            <th>{list.first_name}</th>
            <th>{list.last_name}</th>
            <th><img id={index} src={list.avatar} onClick={this.setState({showEmail:!this.state.showEmail})}/></th>
            {this.state.showEmail &&
            <th>{list.email}</th>
            }
          </tr>
        </tbody>
      );
    })}

{this.state.listUser.map（（列表，索引）=>{
返回(
{list.first_name}
{list.last_name}
{this.state.showmail&&
{list.email}
}
);
})}
能否提供
此.showEmailAddress（）
方法正文？这将有助于解决您的问题。我现在已经添加了我的整个组件。请检查。当我点击img标签时，它仍然显示所有项目的电子邮件。代码沙盒链接：你的
列表.email
看起来像什么？您能否发布完整的代码，尤其是
showEmailAddress
？更好地发布完整的组件代码问题在于，您在每个
th
中都显示电子邮件，您只需添加一个条件，以便仅对单击的图像渲染电子邮件。请参见：让我们。
{this.state.listUser.map((list, index) => {
      return (
        <tbody key={index}>
          <tr>
            <th>{list.first_name}</th>
            <th>{list.last_name}</th>
            <th><img id={index} src={list.avatar} onClick={this.setState({showEmail:!this.state.showEmail})}/></th>
            {this.state.showEmail &&
            <th>{list.email}</th>
            }
          </tr>
        </tbody>
      );
    })}