रेडियो इनपुट ऑन चेंज केवल एक बार आग लगती है?

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 किसी कारण से रेडियो बटन के लिए ऑन चेंज के लिए देख रहा है। किसी भी तरह की सहायता का स्वागत किया जाएगा। धन्यवाद!

अद्यतन

ऐसा लगता है जैसे कि यह 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> 
    ); 
    } 
}