Radio Input onChange 只触发一次？

Posted 2023-05-08

【中文标题】Radio Input onChange 只触发一次？

【英文标题】：Radio Input onChange only fires once?

【发布时间】：2018-01-09 01:21:01

【问题描述】：

我想要完成一个简单的任务：每当单选按钮在其组之间切换时触发一个函数。

class App extends Component 
    onButtonClick() 
        console.log('something was clicked!')
    

    return (
      <div>
        <button onClick=this.onButtonClick.bind(this)>
            Click me
        </button>
        <input
            type="checkbox"
            onChange=this.onButtonClick.bind(this)
        />
        <input
            type="radio"
            value="yes"
            name="answer"
            onChange=this.onButtonClick.bind(this)
        />
        <input
            type="radio"
            value="no"
            name="answer"
            onChange=this.onButtonClick.bind(this)
        />
      </div>
    )

按钮和复选框工作得很好。如果单击它，它会多次触发该功能。单选按钮触发一次然后停止。

几乎就像 ReactJS 出于某种原因停止监视单选按钮的 onChange。任何帮助将不胜感激。谢谢！

更新

它似乎在https://codesandbox.io/s/rGMGzJNL 中正常工作，但在我的本地环境中无法正常工作，这完全令人困惑。如果我弄清楚发生了什么会更新，但如果有人以前遇到过这种情况，将不胜感激！

【问题讨论】：

尝试将你的处理程序绑定移动到构造函数this.handleWeddingRsvp.bind(this)

不幸的是没有改变任何东西。让我简单地举个例子来帮助说明这个问题。

尝试使用onclick作为你的事件——在原生JS中你不能使用onchange***.com/questions/8838648/…

您的 JSX（返回）应该只返回 1 个节点，这可能会导致问题。也许将所有这些都包装在一个 div 中

【参考方案1】：

您需要在每个收音机上设置checked属性并将收音机状态保存在状态中。

class App extends Component 
  state = 
    radio: 'yes',
  

  onButtonClick() 
    console.log("something was clicked!");
  

  onRadioChange(value) 
    console.log("radio change");
    this.setState(
      radio: value,
    )
  

  render() 
    return (
      <div>
        <button onClick=() => this.onButtonClick()>
          Click me
        </button>
        <input type="checkbox" onClick=() => this.onButtonClick() />
        <input
          type="radio"
          value="yes"
          name="answer"
          checked=this.state.radio === 'yes'
          onChange=(e) => this.onRadioChange('yes')
        />
        <input
          type="radio"
          value="no"
          name="answer"
          checked=this.state.radio === 'no'
          onChange=(e) => this.onRadioChange('no')
        />
      </div>
    );
  

【讨论】：

我感觉这是对如何检测 onChange 的误解。感谢您澄清这一点！