Javascript 如何使用react创建动态输入滑块？

我正在尝试为我的应用程序创建一个模式组件，我的模式需要一个滑块来根据用户的输入动态缩放模式中的图像。我完成了这个模态的创建，它看起来是这样的：

我的问题是当我点击滑块时，尤其是在中间的值上，滑块跳到第三的值。它只在转到第三个值后才转到第二个值

这是我的JSX代码

class pizzaModal extends Component {
  state = {
    toggle: false
  }
  toggleHandler = ()=>{
    this.setState({
            toggle: !this.state.toggle
        });
  }
  render (){
    return (
      <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={styles.ImageContainer}>
              <img src={pizzapicture} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>Chicken Curry</h1>
                  <p>Red onions, bell peppers, <br/> chicken, pineapple, mozarella, <br/> tomatosauce, curry, chilli peppers.</p>
                </div>
                <div>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler}
                              checked={!this.state.toggle}/>
                  <label for="small">25cm</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler}
                              checked={this.state.toggle}/>
                  <label for="medium">30cm</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler}
                              checked={this.state.toggle}/>
                  <label for="large">35cm</label>
                </form>
              </div>
              </div>
            </div>
            
          </div>
      </div>
    )
  }
}
export default pizzaModal;

---

您正在使用布尔

切换

状态（要么

真

要么

假

）来表示三向选择

而是使用：

状态={
精选：“小”
}
toggleHandler=（大小）=>（）=>{
这是我的国家({
切换：大小
});
}

在输入中：

onChange={this.toggleHandler("small")} checked={this.state.toggle==="small"}
onChange={this.toggleHandler("medium")} checked={this.state.toggle==="medium"}
onChange={this.toggleHandler("large")} checked={this.state.toggle==="large"}

---

非常感谢你。我完全没有想过这件事。

onChange={this.toggleHandler("small")} checked={this.state.toggle==="small"}
onChange={this.toggleHandler("medium")} checked={this.state.toggle==="medium"}
onChange={this.toggleHandler("large")} checked={this.state.toggle==="large"}