Botón de radio en React

1. Botones de radio en React
2. Componente de radio personalizado

Cualquier desarrollador que alguna vez haya creado un formulario simple en cualquier marco de JavaScript debe estar familiarizado con los botones de opción. Son el tipo <input/> predeterminado que se utiliza cuando se permite a los usuarios elegir entre varias opciones. Veamos dos enfoques para implementar botones de opción en React.

Botones de radio en React

La implementación básica de botones de opción en JSX es muy similar a HTML. Veamos un ejemplo:

<div>
     <input type="radio" name="theme" value="DARK"/>Dark
     <input type="radio" name="theme" value="LIGHT"/>Light
</div>

Este código JSX podría confundirse fácilmente con HTML normal. A medida que introducimos funciones más complejas, como actualizar el estado después de un evento onChange, las diferencias entre HTML y JSX se vuelven más notorias. Veamos este ejemplo:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    return <div onChange={(e) => this.setState({theme: e.target.value})}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
  }
}

En este código, los usuarios tienen dos opciones: Dark y Light. Siempre que eligen cualquiera de ellos, capturamos el valor en el atributo valor del elemento de entrada y establecemos la propiedad theme del estado igual a él. Para una mejor demostración, mire la aplicación de código de reproducción de muestra.

Observe que el controlador de eventos se coloca entre un par de llaves. Es necesario transmitir que la expresión entre llaves debe ejecutarse como código JavaScript.

Como desarrollador, no está limitado por la elección de un controlador de eventos. Puede utilizar onChange, onSubmit si sus botones de opción están colocados dentro de un formulario onClick si está utilizando botones para enviar su elección.

.map()

Si tiene una serie de opciones, puede usar el método .map() para representar cada una de ellas. Por ejemplo, si tiene una lista de colores que le gustaría que sus usuarios elijan, puede:

const arr = ["white", "black", "blue", "green"]
return (
        <div>
        {
            arr.map(color => 
                <input type="radio" name="colors" value={color} />
                   )  
                 }
        </div>
)

Las llaves dentro del elemento <div> le dicen a React que las expresiones dentro de él deben ejecutarse como código JavaScript.

Una vez que se ejecuta el código, terminará con cuatro elementos <input>, cada uno de los cuales tiene un atributo de value del array.

defaultChecked

Para marcar un botón de opción por defecto, puede utilizar el atributo defaultChecked. En el ejemplo anterior, si quisiéramos establecer un tema oscuro predeterminado, así es como se vería nuestro elemento:

<input type="radio" name="theme" defaultChecked value="DARK"/>Dark

Componente de radio personalizado

Al desarrollar aplicaciones de React, siempre debe intentar mantenerlas simples. Además, si va a utilizar mucho la funcionalidad del botón de opción, puede evitar la repetición de código creando un componente de radio personalizado.

const Radio = ({handler, theme}) => {
  return <div style={{height: "500px", width: "500px", backgroundColor:                                 theme.toLowerCase() === "light" ? "white" : "black"}} 
                onChange={handler}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    const handleChange = (e) => this.setState({theme: e.target.value})
    return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
  }
}

En la parte superior, creamos un componente de función sin estado llamado Radio. Podemos pasar los controladores de eventos como un accesorio, por lo que no hay una razón real para que este componente secundario inicie el estado. Los componentes tontos (aquellos sin estado) también son más fáciles de probar y mantener.