javascript - 在点击 react 时切换 Font Awesome 图标

Question

我想在点击时切换 Font Awesome 图标。加载页面时，我查询后端并查明用户是否注册了类(class)，如果他们注册了，我会显示一个勾号图标，否则我会显示一个咖啡图标。

最终目标是让每个单独的图标在单击时变为相反的图标。目前，当我点击图标时，例如，如果我点击一个杯子图标，它不仅会变成一个勾号，而且会将其余的杯子图标也变成勾号。如何解决此问题，以便在单击时仅影响单击的图标？

这是我的代码

功能组件

export const CourseCard = ({
  video,
  normaluser,
  adminuser,
  userauthenticated,
  adminauthenticated,
  handleUnroll,
  handleEnroll,
  enrolled,
  unrolled
}) => (
    <Grid item xs={6} md={4} lg={3}>
            {(video.enrolled_students.includes(normaluser) &&
              userauthenticated) ||
            (video.enrolled_students.includes(adminuser) &&
              adminauthenticated) ? (
                <div className="enrol__button">
                  <div>
                    <a href="#" onClick={() => handleUnroll(video.slug)}>

                      <FontAwesomeIcon
                        icon={enrolled ? faCheckSquare : faCoffee}
                      />
                    </a>
                  </div>
                </div>
            ) : (!video.enrolled_students.includes(normaluser) &&
                userauthenticated) ||
              (!video.enrolled_students.includes(adminuser) &&
                adminauthenticated) ? (
                  <div>
                    <a href="#" onClick={() => handleEnroll(video.slug)}>

                      <FontAwesomeIcon
                        icon={unrolled ? faCoffee : faCheckSquare}
                      />
                    </a>
                  </div>
            ) : (
                   ""
            )}
    </Grid>

容器

export class AllCourses extends React.Component {
  constructor(props) {
    super(props);
    this.user = details(AUTHENTICATED);
    this.admin = AdminDetails(AUTHENTICATED);

    const token = localStorage.getItem("token");
    let normaldetail = details(token);
    this.normaluser = normaldetail.user_id;

    let admindetail = AdminDetails(token);
    this.adminuser = admindetail.user_id;

    this.state = {
      enrolled: true,
      unrolled: true
    };
  }

  handleEnroll = slug => {
    this.props.dispatch(Enroll(slug));
    this.setState({unrolled: !this.state.unrolled}); 
  }

  handleUnroll = slug => {
    this.props.dispatch(Enroll(slug));
    this.setState({enrolled: !this.state.enrolled});
  }

  render() {
    const userauthenticated = this.user;
    const adminauthenticated = this.admin;
    const adminuser = this.adminuser;
    const normaluser = this.normaluser;

    const { allCourses } = this.props;
    const {search, enrolled, unrolled} = this.state;

      return (   

                  <div className="container">
                    <Grid
                      container
                      spacing={3}
                      className="courses__row courses__row__medium"
                    >
                      {allCourses.map(video => (
                        <CourseCard
                          key={video.slug}
                          video={video}
                          enrolled={enrolled}
                          unrolled={unrolled}
                          handleEnroll={this.handleEnroll}
                          handleUnroll={this.handleUnroll}
                          normaluser={normaluser}
                          adminuser={adminuser}
                          userauthenticated={userauthenticated}
                          adminauthenticated={adminauthenticated}
                        />
                      ))}
                      ;
                    </Grid>
                  </div>             

      );
}

Answer 1

您可以取而代之的是在 bool 值上有条件地尝试比较当前的卡 key 和已检查的卡 key

<FontAwesomeIcon icon={this.props.checkedCard == this.props.key ? faCoffee : faCheckSquare} />

在你的容器中:

handleEnroll = slug => {
   this.props.dispatch(Enroll(slug));
   this.setState({checked: this.props.key}); 
}

和:

<CourseCard
  key={video.slug}
  video={video}
  checkedCard={this.state.checkedCard}