Javascript setAttribute onClick函数-React JS

我有两个函数-addBookmark（）和removeBookmark

我有一个可以判断是真是假的书商。我的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>
    )}

如您所见，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>

const[isBookmarked，setIsBookmarked]=useState（props.singleCompany.isBookmarked）；
const addBookmark=e=>{
...
setIsBookmarked（！isBookmarked）
}
const removeBookmark=e=>{
...
setIsBookmarked（！isBookmarked）
}
...

用

切换书签

方法代替

添加书签

/

删除书签

，在发出相应请求之前检查当前状态如何？这个想法可以解决此任务中的问题，但我仍然想知道如何执行onclick属性更改.AFAIR，React使用本机事件的包装器来提供合成事件。我还相信is使用

addEventListener

来监听本机事件。如果这是真的，用vanilla JS替换监听器可能需要一些难看的代码，不确定这是否适用于任何生产代码。我有一个想法-我可以在每个函数中更改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>