Saltar al contenido
Consejos

Cómo usar los botones de radio en ReactJS

En el ejemplo anterior se utilizaron botones de radio con una acción de cambio, pero también se pueden utilizar grupos de botones de radio con un formulario.

Configura un formulario con un grupo de botones de radio como este.

Cómo usar los botones de radio en ReactJS
Cómo usar los botones de radio en ReactJS
123456789101112131415161718192021222324252627282930313233343536373839404142434445render(){return(<formonSubmit={this.formSubmit};<divclassName="radio"<label;<inputtype="radio "value="Male "checked={this. state.selectedOption==="Male"}onChange={this.onValueChange}/> Male </label </div><divclassName="radio"<label="inputtype="radio "value="Female "checked={this.state. selectedOption==="Mujer"}onChange={this.onValueChange}/> Mujer </label></div><divclassName="radio"<label><inputtype="radio "value="Otro "checked={this.state.selectedOption==="Otro"}onChange={this. onValueChange}/{this.state.selectedOption}/{this.state.selectedOption}</div><buttonclassName="btn btn-default "type="submit"> Submit </button ></formform.
jsx


Como puede ver en el ejemplo anterior, en el formulario hay tres botones de radio diferentes junto con el botón de envío, y cada botón de radio se adjunta con una función onChange, llamada onValueChange().



12345onValueChange(event){this.setState({ selectedOption: event.target.value});}
jsx

La función onChangeValue() es llamada cuando el usuario selecciona el botón de radio del grupo, y el valor se actualiza en el estado de componente.

Cuando el usuario termine con la selección, puede que quiera enviar el formulario. El método de envío se llama formSubmit().
1234formSubmit(event){ event.preventDefault();console.log(this.state.selectedOption)}
jsx

Una vez que el usuario envía el formulario, pasa los valores de estado al punto final de la API para publicar o actualizar los datos.

El ejemplo completo debería verse así.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071importReact,{Componente}de "reaccionar";classDemo2extiendeComponente{constructor(){super();esto. state={ name: "React"};this.onValueChange=this.onValueChange.bind(this);this.formSubmit=this. formSubmit.bind(this);}onValueChange(event){this.setState({ selectedOption: event.target.value});}formSubmit(event){ event.preventDefault();console.log(this.state. selectedOption)}render(){return(<formonSubmit={this.formSubmit};<divclassName="radio"<label;<inputtype="radio "value="Male "checked={this.state. selectedOption==="Male"}onChange={this.onValueChange}/> Male </label </div><divclassName="radio"<label="inputtype="radio "value="Female "checked={this.state. selectedOption==="Female"}onChange={this.onValueChange}/> Female </label></div><divclassName="radio"<label><inputtype="radio "value="Other "checked={this. state.selectedOption==="Otro"}onChange={this.onValueChange}/> Other </label></div>div> La opción seleccionada es : {this.state. selectedOption}</div><buttonclassName="btn btn-default "type="submit"> Submit </button></formform;);}}exportdefaultDemo2;
jsx

En este ejemplo completo se utilizó un grupo de botones de radio con el formulario. La propiedad comprobada del botón de radio es la responsable de seleccionarlo una vez que encuentra el valor adecuado del estado actual.