setAttribute onClick 函数 - React JS答案

【问题标题】：setAttribute onClick function - React JSsetAttribute onClick 函数 - React JS
【发布时间】：2020-01-22 11:54:30
【问题描述】：

我有 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 这两个功能。如果书签为真或假（单击时），我需要能够更改此属性。这是我的 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 属性以指向其他功能？

【问题讨论】：

用toggleBookmark 方法代替addBookmark/removeBookmark 在发出相应请求之前检查当前状态怎么样？
这个想法可以解决此任务中的问题，但我仍然想知道如何执行 onclick 属性更改。
AFAIR，React 使用原生事件的包装器来提供合成事件。我也相信这是使用addEventListener 来收听本地事件。如果这是真的，用 vanilla JS 替换监听器可能需要一些丑陋的代码，不确定是否可以用于任何生产代码。
刚刚有了一个想法 - 我可以在每个函数中更改 IsBookmarked 而不是更改属性。
我认为这是给定的，因为您依靠它来显示相应的按钮。

标签： javascript html reactjs jsx

【解决方案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>

【讨论】：