Comment obtenir la valeur du bouton radio (reac-radio-buttons) dans Reactjs?

Question

Comment puis-je obtenir la valeur des boutons radio, si j'appelle updateRadioButton dans RadioGroup, il en résulte une erreur. J'ai besoin d'imprimer en tant que Mâle ou Femelle dans la console en utilisant (Réaction-radio-boutons). Les boutons radio impriment correctement, mais je suis incapable d'obtenir la valeur. Merci d'avance.

class CreateUserComponent extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state={radio:''} 
    } 

    updateRadioButton(e) { 
     this.setState({ radio: e.target.value }); 
    } 

    <RadioGroup horizontal> 
      <RadioButton value="Male">Male</RadioButton> 
      <RadioButton value="Female">Female</RadioButton> 
     </RadioGroup> 

Answer 1

Eh bien selon le DOCS de cette lib, RadioGroup a un gestionnaire de prop onChange que vous pouvez passer qui renverra la valeur sélectionnée et vous pouvez le mettre dans l'état ou le transmettre.

Voici petit exemple en cours d'exécution avec votre code:

debugger 
 
const RadioGroup = ReactRadioButtonsGroup.ReactRadioButtonsGroup; 
 
const RadioButton = ReactRadioButtonsGroup.ReactRadioButton; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {}; 
 
    } 
 

 
    onRadiochange = value => { 
 
    console.log(value); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <RadioGroup horizontal onChange={this.onRadiochange}> 
 
      <RadioButton value="Male">Male</RadioButton> 
 
      <RadioButton value="Female">Female</RadioButton> 
 
     </RadioGroup> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/react-radio-buttons-group@1.0.2/build/bundle.min.js"></script> 
 
<div id="root"></div>

Answer 2

De this react-radio-buttons example:

class CreateUserComponent extends React.Component { 
    ... 
    updateRadioButton(value) { 
    this.setState({ radio: value }); 
    } 

    render() { 
    ... 

    return (
     <RadioGroup horizontal onChange={this.updateRadioButton} > 
     <RadioButton value="Male">Male</RadioButton> 
     <RadioButton value="Female">Female</RadioButton> 
     </RadioGroup> 
    ) 
    ... 
    } 
} 

Answer 3

Ajouter onChange événement à RadioGroup.

class CreateUserComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state={radio:''}; 
    this.updateRadioButton = this.updateRadioButton.bind(this); 
} 

updateRadioButton(value) { 
    this.setState({ radio: value }); 
} 

render() { 
return(
    <RadioGroup horizontal onChange={this.updateRadioButton}> 
     <RadioButton value="Male">Male</RadioButton> 
     <RadioButton value="Female">Female</RadioButton> 
    </RadioGroup> 
); 
}