Reactjs 如何使用useState（在React中）防止多次单击div？_Reactjs_React Hooks

Reactjs 如何使用useState（在React中）防止多次单击div？

reactjs

Reactjs 如何使用useState（在React中）防止多次单击div？,reactjs,react-hooks,Reactjs,React Hooks,我正在尝试修复当前的bug，其中我有6个带有onClick（）事件的可单击div。例如，单击div'a'、'b'或'c'时，计数将增加1。之后，这些div将无法再次单击。到目前为止，我正在使用useRef（）并将属性设置为“disabled”，但这不起作用另一个问题是，是否有可能将其提取出来，为其他具有相同div属性但正确答案不同的游戏制作一个可重用组件我的updateScore和onClick代码如下： import React, { useState, useRef } from &

我正在尝试修复当前的bug，其中我有6个带有

onClick（）

事件的可单击div。例如，单击

div

'a'、'b'或'c'时，计数将增加1。之后，这些div将无法再次单击。到目前为止，我正在使用

useRef（）

并将属性设置为“disabled”，但这不起作用

另一个问题是，是否有可能将其提取出来，为其他具有相同

div

属性但正确答案不同的游戏制作一个可重用组件

我的

updateScore

和

onClick

代码如下：

  import React, { useState, useRef } from "react";
    const ClickScore = ({ taskNumber, numberOfAnswers }) => {
  const [grid11, setGrid11] = useState("");
  const [grid12, setGrid12] = useState("");
  const [grid13, setGrid13] = useState("");
  const [grid21, setGrid21] = useState("");
  const [grid22, setGrid22] = useState("");
  const [grid23, setGrid23] = useState("");
  const [score, setScore] = useState(0);

  const grid11Clicked = () => {
    setGrid11("clicked");
  };
  const grid12Clicked = () => {
    setGrid12("clicked");
  };
  const grid13Clicked = () => {
    setGrid13("clicked");
  };
  const grid21Clicked = () => {
    setGrid21("clicked");
  };
  const grid22Clicked = () => {
    setGrid22("clicked");
  };
  const grid23Clicked = () => {
    setGrid23("clicked");
  };
  let gridRef = useRef();

  const onGridClick = (e) => {
    if (gridRef.current) {
      gridRef.current.setAttribute("disabled", "disabled");
    }
  };

  const updateScore = () => {
    if (taskNumber === 1) {
      if (grid12 || grid21 || grid23 === "clicked") {
        setScore((prevScore) => prevScore + 1);
      }
      return `${score}/${numberOfAnswers}`;
    }
  };

  const clickHandler12 = () => {
    setGrid11("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };
  const clickHandler21 = () => {
    setGrid21("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };
  const clickHandler23 = () => {
    setGrid23("clicked");
    updateScore();
    onGridClick();
    console.log("disabled");
  };

  return (
    <>
      <div>
        <p id="score">{score}</p>
      </div>
      <div
        onClick={grid11Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "blue",
          left: 23,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid12Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid13Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 37.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={clickHandler21}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 3,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={grid22Clicked}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 298.86,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
      <div
        onClick={clickHandler23}
        style={{
          position: "absolute",
          border: 1,
          borderColor: "red",
          left: 600,
          height: 170.48,
          width: 290.86,
          top: 212.91,
          zIndex: 10,
          borderStyle: "solid",
        }}></div>
    </>
  );
};

export default ClickScore;

import React，{useState，useRef}来自“React”；
常量ClickScore=（{taskNumber，numberOfAnswers}）=>{
const[grid11，setGrid11]=useState（“”）；
const[grid12，setGrid12]=useState（“”）；
const[grid13，setGrid13]=useState（“”）；
const[grid21，setGrid21]=useState（“”）；
const[grid22，setGrid22]=useState（“”）；
const[grid23，setGrid23]=useState（“”）；
const[score，setScore]=useState（0）；
常量grid11Clicked=（）=>{
setGrid11（“点击”）；
};
常量grid12Clicked=（）=>{
setGrid12（“点击”）；
};
常量grid13Clicked=（）=>{
setGrid13（“点击”）；
};
常量grid21Clicked=（）=>{
setGrid21（“点击”）；
};
常量grid22Clicked=（）=>{
setGrid22（“点击”）；
};
const grid23Clicked=（）=>{
setGrid23（“点击”）；
};
设gridRef=useRef（）；
const onGridClick=（e）=>{
if（网格参考电流）{
gridRef.current.setAttribute（“禁用”、“禁用”）；
}
};
const updateScore=（）=>{
如果（任务编号===1）{
如果（grid12 | | grid21 | | grid23==“单击”）{
setScore（（prevScore）=>prevScore+1）；
}
返回`${score}/${numberOfAnswers}`；
}
};
常量clickHandler12=（）=>{
setGrid11（“点击”）；
updateScore（）；
onGridClick（）；
控制台日志（“禁用”）；
};
常量clickHandler21=（）=>{
setGrid21（“点击”）；
updateScore（）；
onGridClick（）；
控制台日志（“禁用”）；
};
常量clickHandler23=（）=>{
setGrid23（“点击”）；
updateScore（）；
onGridClick（）；
控制台日志（“禁用”）；
};
返回(
{score}
);
};
导出默认点击分数；

以下是您需要执行的操作：

const Comp = () => {
  const [avoidExtra, setAvoidExtra] = useState(false);

  const handleClick = () => {
    if(!avoidExtra){
      setAvoidExtra(true);
      // do other things
    }
  }

  return <div onClick={handleClick}>Hi, I'm here to be clicked</div>
}

const Comp=（）=>{
const[avoidExtra，setAvoidExtra]=useState（false）；
常量handleClick=（）=>{
如果（！avoidExtra）{
setAvoidExtra（真）；
//做其他事情
}
}
返回嗨，我在这里被点击
}

以下是您需要执行的操作：

const Comp = () => {
  const [avoidExtra, setAvoidExtra] = useState(false);

  const handleClick = () => {
    if(!avoidExtra){
      setAvoidExtra(true);
      // do other things
    }
  }

  return <div onClick={handleClick}>Hi, I'm here to be clicked</div>
}

const Comp=（）=>{
const[avoidExtra，setAvoidExtra]=useState（false）；
常量handleClick=（）=>{
如果（！avoidExtra）{
setAvoidExtra（真）；
//做其他事情
}
}
返回嗨，我在这里被点击
}

不使用ref，您可以设置布尔值的标志数组，以了解是否单击了该特定按钮，如果不让处理程序函数运行，则只需将null作为处理程序函数传递给onClick

    Const Comp = () => {
      const [clickedArr, setClickedArr] = useState(new Array(6).fill(false));


      const handleClick = (index) => {
        // if not this button clicked before, than only do work
        if (!flagArr[index]) {
           setClickedArr(prev => {
             const newArr = [...prev];
             newArr[index] = true;
             return newArr;
           });

           // do other things
         }
       };

       return (
         <>
           {/* just provide indexes to handle click function, either by yourself
             or by mapping over your data */}
           <div onClick={clickedArr[0] ? null : e => handleClick(0)}>content</div>
           <div onClick={clickedArr[1] ? null : e => handleClick(1)}>content</div>
         </>
       )
    }

Const Comp=（）=>{
const[clickedArr，setClickedArr]=useState（新数组（6）.fill（false））；
常量handleClick=（索引）=>{
//如果之前没有点击此按钮，则只做工作
如果（！flagArr[index]）{
设置ClickedArr（上一个=>{
const newArr=[…prev]；
newArr[index]=true；
返回newArr；
});
//做其他事情
}
};
返回(
{/*只需提供索引来处理click函数，您自己也可以
或者通过映射数据*/}
handleClick（0）}>内容
handleClick（1）}>内容
)
}

不使用ref，您可以设置布尔值的标志数组，以了解是否单击了该特定按钮，如果不让处理程序函数运行，则只需将null作为处理程序函数传递给onClick

    Const Comp = () => {
      const [clickedArr, setClickedArr] = useState(new Array(6).fill(false));


      const handleClick = (index) => {
        // if not this button clicked before, than only do work
        if (!flagArr[index]) {
           setClickedArr(prev => {
             const newArr = [...prev];
             newArr[index] = true;
             return newArr;
           });

           // do other things
         }
       };

       return (
         <>
           {/* just provide indexes to handle click function, either by yourself
             or by mapping over your data */}
           <div onClick={clickedArr[0] ? null : e => handleClick(0)}>content</div>
           <div onClick={clickedArr[1] ? null : e => handleClick(1)}>content</div>
         </>
       )
    }

Const Comp=（）=>{
const[clickedArr，setClickedArr]=useState（新数组（6）.fill（false））；
常量handleClick=（索引）=>{
//如果之前没有点击此按钮，则只做工作
如果（！flagArr[index]）{
设置ClickedArr（上一个=>{
const newArr=[…prev]；
newArr[index]=true；
返回newArr；
});
//做其他事情
}
};
返回(
{/*只需提供索引来处理click函数，您自己也可以
或者通过映射数据*/}
handleClick（0）}>内容
handleClick（1）}>内容
)
}

这是可行的

import React，{useState}来自“React”
const GridCell=（{style，onGridClick}）=>{
const[clicked，setClicked]=useState（false）
常量handleClick=（）=>{
如果（！单击）{
setClicked（true）
onGridClick（）
}
}
返回(
)
}
常量ClickScore=（{taskNumber，numberOfAnswers}）=>{
const[score，setScore]=useState（0）
const onGridClick=（行、列）=>{
如果（任务编号===1）{
如果(
（行===1和列===2）||
（行===2和列===1）||
（行===2和列===3）
) {
setScore（（prevScore）=>prevScore+1）
}
返回`${score}/${numberOfAnswers}`
}
}
返回(
{score}
onGridClick（1，1）}
风格={{
边框颜色：“蓝色”，
左：23，
身高：170.48，
宽度：290.86，
排名：37.91，
}}
/>
onGridClick（1，2）}
风格={{
边框颜色：“红色”，
左：298.86，
身高：170.48，
宽度：290.86，
排名：37.91，
}}
/>
onGridClick（1,3）}
风格={{
边框颜色：“红色”，
左：