javascript - setAttribute onClick函数-React JS

我有2个功能-addBookmark（）和removeBookmark。

我有可用的IsBookmakred，它是对还是错。我的包含书签的JSX的一部分是：

  {props.singleCompany.IsBookmarked ? (
      <div>
        <span
          className="fa fa-star bookmarked"
          onClick={removeBookmark}
          data-tip="Remove Bookmark"
        ></span>
        <ReactTooltip />
      </div>
    ) : (
      <div>
        <span
          className="fa fa-star"
          onClick={addBookmark}
          data-tip="Add Bookmark"
        ></span>
        <ReactTooltip />
      </div>
    )}

如您所见，我根据情况使用了两个功能addBookmark和removeBookmark。如果书签为true或false（单击它时），我需要能够更改此属性。这是我的其中一项功能，例如，没有POST请求：

    const addBookmark = e => {
    console.log(e.target);
    const data = {
      userGuid: sessionStorage.getItem("Guid"),

      smallPlanID: props.singleCompany.SmallCompanyPlanID,

      largePlanID: props.singleCompany.LargeCompanyPlanID
    };
    e.target.classList.add("bookmarked");
    e.target.onclick = removeBookmark();

    //POST REQUEST IS HERE...
  };

如您所见，e.target.onclick = removeBookmark（）;不是我想要的东西。这只是为了说明我的想法。我试过了：

e.target('onclick','doSomething();');

也没有成功。如何更改我的onClick属性以指向其他功能？

最佳答案

您可以创建状态isBookmarked并像这样使用它：

const [isBookmarked, setIsBookmarked] = useState(props.singleCompany.IsBookmarked);

const addBookmark = e => {
  ...
  setIsBookmarked(!isBookmarked)
}

const removeBookmark = e => {
  ...
  setIsBookmarked(!isBookmarked)
}

...
<div>
  <span
    className=`fa fa-star ${isBookmarked ? 'bookmarked' : ''}`
    onClick={isBookmarked ? removeBookmark : addBookmark}
    data-tip={isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
  ></span>
  <ReactTooltip />
</div>