在反应中单击时切换字体真棒图标

Question

我想在点击时切换字体真棒图标。当页面加载时，我查询后端并查明用户是否已注册课程，如果他们已注册，我会显示一个勾号图标，否则我会显示一个咖啡图标。

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

这是我的代码

功能组件

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

    };

Answer 1

您可以改为以布尔值为条件，尝试将当前卡密钥与已检查的卡密钥进行比较<FontAwesomeIcon icon={this.props.checkedCard == this.props.key ? faCoffee : faCheckSquare} />并在您的容器中：handleEnroll = slug => {&nbsp; &nbsp;this.props.dispatch(Enroll(slug));&nbsp; &nbsp;this.setState({checked: this.props.key});&nbsp;}和 ：<CourseCard&nbsp; key={video.slug}&nbsp; video={video}&nbsp; checkedCard={this.state.checkedCard}

Answer 2

由于您正在检查Grid组件当前用户是否已注册（通过查看该video.enrolled_students数组是否包含当前用户），那么这些enrolled和unrolled标志似乎不再需要了。因此，Grid您应该能够将第一个<FontAwesomeIcon />调用更改为：<FontAwesomeIcon&nbsp;icon='faCheckSquare'&nbsp;/>第二个到<FontAwesomeIcon&nbsp;icon='faCoffee'&nbsp;/>此外，您在 AllCourses 中有一个拼写错误，您this.props.dispatch(Enroll(slug));在这两个课程中都调用了它handleEnroll，handleUnroll并且它最有可能Unroll(slug)在第二个中调用。

Answer 3

这是因为 handleEnroll 和 handleUnroll 设置了所有课程共享的状态。根据您的描述，听起来您希望状态实际上是每门课程。所以你应该AllCourses稍微改变一下handleEnroll = slug => {&nbsp; // This should cause some change to the relevant course in allCourses&nbsp; &nbsp;this.props.dispatch(Enroll(slug));}handleUnroll = slug => {&nbsp; // This should cause some change to the relevant course in allCourses&nbsp; this.props.dispatch(Enroll(slug));}// Delete thisthis.state = {&nbsp; &nbsp; enrolled: true,&nbsp; &nbsp; unrolled: true};然后更改 CourseCard 映射以使用来自video而非现已淘汰的 AllCourses 状态的属性。{allCourses.map(video => (&nbsp;<CourseCard&nbsp; &nbsp; &nbsp;key={video.slug}&nbsp; &nbsp; &nbsp;video={video}&nbsp; &nbsp; &nbsp;enrolled={video.enrolled}&nbsp; &nbsp; &nbsp;unrolled={video.unrolled}&nbsp; &nbsp; &nbsp;handleEnroll={this.handleEnroll}&nbsp; &nbsp; &nbsp;handleUnroll={this.handleUnroll}&nbsp; &nbsp; &nbsp;normaluser={normaluser}&nbsp; &nbsp; &nbsp;adminuser={adminuser}&nbsp; &nbsp; &nbsp;userauthenticated={userauthenticated}&nbsp; &nbsp; &nbsp;adminauthenticated={adminauthenticated}&nbsp; />))}