React Custom Roulette 如何显示轮盘号码

Posted 2023-02-22

【中文标题】React Custom Roulette 如何显示轮盘号码

【英文标题】：React Custom Roulette how to show the roulette number

【发布时间】：2021-08-28 15:52:05

【问题描述】：

> - - DEMO CODE - - <

问题是轮盘停止时显示数字。

const data = [
   id: 1, option: 10 ,
   id: 2, option: -30 ,
   id: 3, option: 50 ,
   id: 4, option: 30 ,
   id: 5, option: 40 ,
   id: 6, option: 20 
];

export default () => 
  const [mustSpin, setMustSpin] = useState(false);
  const [prizeNumber, setPrizeNumber] = useState(0);

  const handleSpinClick = () => 
    const newPrizeNumber = Math.floor(Math.random() * data.length);
    setPrizeNumber(newPrizeNumber);
    setMustSpin(true);
  ;

  return (
    <>
      <div align="center">
        <h1 align="center">Roulette Game</h1>
        <hr />
        <Wheel
          mustStartSpinning=mustSpin
          prizeNumber=prizeNumber
          data=data
          outerBorderColor=["#f2f2f2"]
          outerBorderWidth=[25]
          innerBorderColor=["#f2f2f2"]
          radiusLineColor=["#dedede"]
          radiusLineWidth=[10]
          textColors=["#ffffff"]
          fontSize=[50]
          perpendicularText=[true]
          backgroundColors=[
            "#F22B35",
            "#F99533",
            "#24CA69",
            "#514E50",
            "#46AEFF",
            "#9145B7"
          ]
          onStopSpinning=() => 
            setMustSpin(false);
          
        />
        <button className="button2" onClick=handleSpinClick>
          SPIN
        </button>
        <br />
        data.option
        <hr />
      </div>

我在上面输入了这段代码，但它显示了 const 数据数组 id = [ id: 1, option: 10 , id: 2, option: -30 , id: 3, option: 50 , id: 4 , 选项: 30 , id: 5, 选项: 40 , id: 6, 选项: 20 ];

我尝试过，但失败了

data.option

【问题讨论】：

请尝试更新您的问题以包含有问题的相关代码的Minimal, Complete, and Reproducible Code Example。 Codesandbox 链接很好，但问题应该包括现在的代码“快照”......链接往往会随着时间的推移而衰减。

@DrewReese 感谢您的关注

【参考方案1】：

data 是一个数组，因此它可能没有 option 属性。

似乎prizeNumber 是伪随机索引，因此要显示从data 数组访问它的选项。

data[prizeNumber].option

【讨论】：

当我点击“SPIN”时，它已经显示了结果，完美。旋转结束时是否可以显示结果？还是稍等片刻？

@André 当然，您可以使用!mustSpin && data[prizeNumber].option 有条件地在车轮旋转时隐藏结果，或者如果您想对它进行更多控制，您可以添加更多状态，以便在您希望显示和处理时添加更多状态它还在onStopSpinning 回调中。您可能需要添加一些额外的逻辑，以便在 第一次旋转之前不显示“结果”。

感谢您的帮助，我知道这是一个简单的事情，但我正在开始，但仍然不清楚大声笑，感谢您的时间

@André 不用担心，我们都是从某处开始的。我的附加评论是否仍不清楚，或者这是否为您解决了问题？

就是这样。通过一个条件，当它为真时，它显示自旋数，完美

【参考方案2】：

您正在寻找数组中的对象属性。 试试这个：

onStopSpinning=() => 
    setMustSpin(false);
    alert(data[prizeNumber].option)