javascript - setAttribute onClick 函数 - React JS

Question

我有 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(单击时)，我需要能够更改此属性。这是我的函数 1，例如没有 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 属性以指向其他函数？

Answer 1

您可以创建一个状态 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>