無線電輸入onChange只會觸發一次？

Question

我有一個簡單的任務，我試圖完成：每當單選按鈕在組之間切換時觸發一個函數。

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一樣。任何幫助將不勝感激。謝謝！

UPDATE

現在看來似乎正常工作在https://codesandbox.io/s/rGMGzJNL，但不是在我的本地環境，這是完全令人費解的正常工作。如果我知道發生了什麼，將會更新，但如果有人遇到過這種情況，希望得到任何指導！

Answer 1

您需要在每個無線電臺上設置選中的屬性並將狀態保存爲無線電狀態。

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> 
    ); 
    } 
}