Функция setAttribute onClick - реагирует JS

Question

У меня есть 2 функции - addBookmark () и удаление Bookmark.

У меня есть переменная IsBookmakred, которая имеет значение true или false. Часть моей закладки, содержащей 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 в соответствии с ситуацией. Мне нужно иметь возможность изменить эти атрибуты, если закладка истинна или ложна (когда она нажата). Вот одна из моих функций, например, без запроса 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>