如何验证每个浏览器的点击一次？

Question

我怎样才能减少评分，使每个浏览器只能评分一次？

我需要在 React 中对 raiting 组件进行验证，其中客户端只能对每个浏览器评分一次。

这里是评级组件的例子：

export default function App() {
  const [value, setValue] = React.useState(0);
  return (
    <div>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend">Rate</Typography>
        <Rating
          name="pristine"
          value={value}
          onClick={(e) => setValue(e.target.value)}
        />
      </Box>
    </div>
  );
}

这里是组件 sandbox link

的沙箱 link

Answer 1

您可以想到的一种可能的解决方案是使用 localStorage

对于每个已经评分的用户，您将一个布尔值存储到本地存储。

那么下次先验证

像这样：

export default function App() {
  const [value, setValue] = React.useState(0);
  const hasRated = localStorage.getItem("hasRated");

  const handleRate = (e) => {
    setValue(e.target.value);
    localStorage.setItem("hasRated", true);
  };
  return (
    <div>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend">Rate</Typography>
        <Rating
          disabled={hasRated}
          name="pristine"
          value={value}
          onClick={handleRate}
        />
      </Box>
    </div>
  );
}

请注意，这只是一个演示示例，因此假设您需要根据您的需要进行一些改进

沙盒示例：

如何验证每个浏览器的点击一次？

How to validate click one per browser?

javascript

browser

jsx

reactjs

react-hooks