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

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 => {

   this.props.dispatch(Enroll(slug));

   this.setState({checked: this.props.key}); 

}

和 ：

<CourseCard

  key={video.slug}

  video={video}

  checkedCard={this.state.checkedCard}

Answer 2

由于您正在检查Grid组件当前用户是否已注册（通过查看该video.enrolled_students数组是否包含当前用户），那么这些enrolled和unrolled标志似乎不再需要了。

因此，Grid您应该能够将第一个<FontAwesomeIcon />调用更改为：

<FontAwesomeIcon icon='faCheckSquare' />

第二个到

<FontAwesomeIcon icon='faCoffee' />

---

此外，您在 AllCourses 中有一个拼写错误，您this.props.dispatch(Enroll(slug));在这两个课程中都调用了它handleEnroll，handleUnroll并且它最有可能Unroll(slug)在第二个中调用。

Answer 3

这是因为 handleEnroll 和 handleUnroll 设置了所有课程共享的状态。根据您的描述，听起来您希望状态实际上是每门课程。

所以你应该AllCourses稍微改变一下

handleEnroll = slug => {

  // This should cause some change to the relevant course in allCourses

   this.props.dispatch(Enroll(slug));

}

handleUnroll = slug => {

  // This should cause some change to the relevant course in allCourses

  this.props.dispatch(Enroll(slug));

}

// Delete this

this.state = {

    enrolled: true,

    unrolled: true

};

然后更改 CourseCard 映射以使用来自video而非现已淘汰的 AllCourses 状态的属性。

{allCourses.map(video => (

 <CourseCard

     key={video.slug}

     video={video}

     enrolled={video.enrolled}

     unrolled={video.unrolled}

     handleEnroll={this.handleEnroll}

     handleUnroll={this.handleUnroll}

     normaluser={normaluser}

     adminuser={adminuser}

     userauthenticated={userauthenticated}

     adminauthenticated={adminauthenticated}

  />

))}