Javascript 在reactjs中的单个onClick上切换两个不同的函数

我有两种不同的功能

  bookmark = () => {
//logic for bookmark
}

  bookmarkRemove = () => {
//logic for bookmark remove
}

    return (
      <div>
   <img src={bookamark} alt="bookmark" onClick={}
</div>
)

bookmark=（）=>{
//书签逻辑
}
书签删除=（）=>{
//删除书签的逻辑
}
返回(
)

---

第一次单击时，我想触发

bookmark（）

，第二次单击同一个图像时，它应该触发

bookmarkRemove（）

和第三次bookmark（），以此类推有多种方法，但我将使用闭包来演示

onClick={toggleBookmark（）}

函数切换书签（）{
让bookmarked=false；//从状态获取默认值
返回函数（）{
书签？书签移除（）：书签（）；
书签=！书签；
}
}

---

现在，您可以在组件中将此

状态保持为书签状态

也可以

有多种方法可以做到这一点，但我将使用闭包来演示

onClick={toggleBookmark（）}

函数切换书签（）{
让bookmarked=false；//从状态获取默认值
返回函数（）{
书签？书签移除（）：书签（）；
书签=！书签；
}
}

---

现在，您可以在组件中将此

状态设置为书签

状态

您可以创建一个状态来检查并触发所需的功能

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[isBookMakred，setIsBookMakred]=useState（false）；
常量书签=（）=>{
//书签逻辑
};
常量书签删除=（）=>{
//删除书签的逻辑
};
const handleOnclick=（）=>{
如果（isBookMaked）{
书签删除（）；
SetIsBookMaked（假）；
}否则{
书签（）；
setIsBookMakred（真）；
}
};
返回(
);
}

您可以创建一个状态来检查并触发所需的功能

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[isBookMakred，setIsBookMakred]=useState（false）；
常量书签=（）=>{
//书签逻辑
};
常量书签删除=（）=>{
//删除书签的逻辑
};
const handleOnclick=（）=>{
如果（isBookMaked）{
书签删除（）；
SetIsBookMaked（假）；
}否则{
书签（）；
setIsBookMakred（真）；
}
};
返回(
);
}

创建一个

切换

状态变量，并在触发该函数时对其进行更改

import React, { useState } from "react";

export default function App() {
  const [toggle, setToggle] = useState(false);

  function toggleFunction(){
    if(toggle) bookmarkRemove()
    else bookmark()
    setToggle(!toggle)
  }

  return (
    <img src={bookamark} alt="bookmark" onClick={toggleFunction}
  );
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[toggle，setToggle]=useState（false）；
函数切换函数（）{
如果（切换）书签删除（）
else书签（）
setToggle（！toggle）
}
返回(
创建一个
切换
状态变量，并在触发该函数时对其进行更改

import React, { useState } from "react";

export default function App() {
  const [toggle, setToggle] = useState(false);

  function toggleFunction(){
    if(toggle) bookmarkRemove()
    else bookmark()
    setToggle(!toggle)
  }

  return (
    <img src={bookamark} alt="bookmark" onClick={toggleFunction}
  );
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[toggle，setToggle]=useState（false）；
函数切换函数（）{
如果（切换）书签删除（）
else书签（）
setToggle（！toggle）
}
返回(
在状态中设置切换

    const [toggle, setToggle] = useState(true)
    bookmark = () => { setToggle(false) //other logic }
    bookmark = () => {setToggle(true) //other logic}


    return (
          <div>
       <img src={bookmark} alt="bookmark" 
    onClick={(toggle) => toggle? this.bookmark: this.bookmarkRemove}>
    </div>
    )

const[toggle，setToggle]=useState（true）
bookmark=（）=>{setToggle（false）//其他逻辑}
bookmark=（）=>{setToggle（true）//其他逻辑}
返回(
切换？this.bookmark:this.bookmark删除}>
)
在状态中设置切换

    const [toggle, setToggle] = useState(true)
    bookmark = () => { setToggle(false) //other logic }
    bookmark = () => {setToggle(true) //other logic}


    return (
          <div>
       <img src={bookmark} alt="bookmark" 
    onClick={(toggle) => toggle? this.bookmark: this.bookmarkRemove}>
    </div>
    )

const[toggle，setToggle]=useState（true）
bookmark=（）=>{setToggle（false）//其他逻辑}
bookmark=（）=>{setToggle（true）//其他逻辑}
返回(
切换？this.bookmark:this.bookmark删除}>
)
//本地状态。。
状态={
书签：对，
}
//根据状态执行，然后切换。。
车把簿=（）=>{
this.state.bookMark？bookMark（）：removeBookMark（）；
this.setState（（prevState）=>{
…国家，
书签：！this.state.bookmark，
})
}
this.handleBookMark（）}>
//本地状态。。
状态={
书签：对，
}
//根据状态执行，然后切换。。
车把簿=（）=>{
this.state.bookMark？bookMark（）：removeBookMark（）；
this.setState（（prevState）=>{
…国家，
书签：！this.state.bookmark，
})
}
this.handleBookMark（）}>
问题是什么？问题是，在下一个组件重新加载时，书签将返回false。这就是为什么我提到要将
书签也保持在状态1）您在onClick上默认调用它（注意偏执）。它应该是{toggleBookMark}或{（）=>toggleBookMark（）}。2）注意到你的评论，理解你的逻辑，但写得不好。。您可以随时返回此.state.bookmarked吗？书签（）：书签删除（）。想让它保持自由反应问题是什么？问题是，在下一个组件重新加载时，书签将返回false。这就是为什么我提到要将
书签保持在状态1）您在onClick上默认调用它（请注意偏执）。它应该是{toggleBookMark}或{（）=>toggleBookMark（）}。2） 注意到你的评论，理解你的逻辑，但写得不好。。您可以随时返回此.state.bookmarked吗？书签（）：书签删除（）。想让它保持自由您的代码返回一个错误“Uncaught SyntaxError:invally return statement”@Dony这只是组件中的一段代码，后面是主题代码。谢谢@Dony。最好是编写一个简单的工作代码。所以我已经更新了代码段，您的代码返回了一个错误“Uncaught SyntaxError:invalique return statement”@Dony这只是组件中的一段代码，后面是主题代码。谢谢@Dony。最好是编写一个简单的工作代码。因此，我更新了代码段
this.setState（（prevState）=>{return{…prevState，bookmark:！this.state.bookmark，}；
-它被return语句
this.setState（（prevState）=>{retu