如何根据当前状态值使单选按钮选中/激活

Posted 2023-02-22

【中文标题】如何根据当前状态值使单选按钮选中/激活

【英文标题】：How to make radio button checked/active depending on current state value

【发布时间】：2021-02-05 18:18:33

【问题描述】：

所以我有一个标题，它每 5 秒循环显示 4 个图像。用户还可以使用 5 个单选按钮自行循环浏览这些图像。

当用户自己点击它时，激活/选中单选按钮的样式会被应用，但是，如果计时器切换图像，活动单选按钮保持不变。

我知道这是基于我下面的代码的预期行为，我只是想知道如何更改选中的单选按钮以匹配它的当前图像！

任何帮助将不胜感激！

constructor(props) 
  super(props);

  this.state = 
      time: 0,
      start: 0,
      currentIndex: 0
  ;
  this.setIndex = this.setIndex.bind(this);
  this.startTimer = this.startTimer.bind(this);
  this.resetTimer = this.resetTimer.bind(this);


componentDidMount() 
    this.startTimer();

componentDidUpdate() 
    if (this.state.time === 5) 
        this.setIndex(this.state.currentIndex + 1);
    

startTimer() 
    this.timer = setInterval(
        () =>
            this.setState(
                time: this.state.time + 1
            ),
        1000
    );

resetTimer() 
    this.setState( time: 0 );


setIndex(index, e) 
    console.log("changing");
    if (index < 0) 
        index = headers.length - 1;
    
    if (index >= headers.length) 
        index = 0;
    

    this.setState(
        currentIndex: index,
        time: Date.now() - this.state.start
    );
    this.resetTimer();

... 跳过的代码

<div className="carousel">
    <img
       
       className="background-img"
       src=headers[this.state.currentIndex].image
    />
       <div className="buttons-container">
            <input
                  type="radio"
                   value="1"
                   defaultChecked
                   name="index"
                   onClick=() => this.setIndex(0)
            ></input>
            <input
                   type="radio"
                   value="2"
                   name="index"
                   onClick=() => this.setIndex(1)
            ></input>
            <input
                   type="radio"
                   value="3"
                   name="index"
                   onClick=() => this.setIndex(2)
             ></input>
              <input
                   type="radio"
                   value="4"
                   name="index"
                   onClick=() => this.setIndex(3)
              ></input>
       </div>
 </div>

【参考方案1】：

如果我理解正确，您使用的单选按钮在点击时会被激活（这是默认的 html 行为），而在使用计时器时则不会。

小菜一碟，每次定时器切换后台时，只需通过JS激活即可。

您可能假设您的 setIndex() 函数将在您的计时器每次进行更改时运行，但事实并非如此，因为该函数仅在人们实际点击收音机或发出 onClick 事件时才会启动。 因为：

onClick=() => this.setIndex(3)

要修复它，您应该修改这段代码：

startTimer() 
    this.timer = setInterval(
        () =>
            this.setState(
                time: this.state.time + 1
            ),
        1000
    );

resetTimer() 
    this.setState( time: 0 );

在那里你应该设置单选框的值，并更新索引的状态。

重置时记得重置状态值功能并将单选框的值设置为#1单选。

【参考方案2】：

您可以查看currentIndex 以获得自动更改单选按钮。

在render函数中

const  currentIndex  = this.state

      <div className="buttons-container">
        <input
          type="radio"
          value="1"
          defaultChecked
          name="index"
          checked=currentIndex === 0
          onClick=() => this.setIndex(0)
        ></input>
        <input
          type="radio"
          value="2"
          name="index"
          checked=currentIndex === 1
          onClick=() => this.setIndex(1)
        ></input>
        <input
          type="radio"
          value="3"
          name="index"
          checked=currentIndex === 2
          onClick=() => this.setIndex(2)
        ></input>
        <input
          type="radio"
          value="4"
          name="index"
          checked=currentIndex === 3
          onClick=() => this.setIndex(3)
        ></input>
       </div>