Trabajando con los botones de React-bootstrap

Los botones don' no tienen que ser usados sólo para enviar un formulario. También podemos usar los botones como casillas de verificación o como opciones de radio. Un ejemplo de una lista de opciones de casilla de verificación usando botones se vería así:

12345678910111213141516171819importarToggleButtonGroupfrom'react-bootstrap/ToggleButtonGroup';importToggleButtonfrom'react-bootstrap/ToggleButton';constApp=()=>{retorno(<form>< label htmlFor='name'>Name</label><input id='name'/><label htmlFor='genre'>Género de música favorito</label><ToggleButtonGroup type=' checkbox' name='genre'><ToggleButton value={'hip_hop'}>HipHop</ToggleButton><ToggleButton value={'jazz'}>Jazz</ToggleButton>< Valor de ToggleButton={'country'}>Country</ToggleButton></ToggleButtonGroup><Tipo de botón='submit'>Submit</Button></form>);};</pre
js

Grupos de botones

Aquí estoy usando algunos componentes que facilitan el manejo de múltiples botones. El componente ToggleButtonGroup se usa para agrupar componentes de forma en que cada ToggleButton es una opción de ese grupo. ToggleButtonGroup toma un atributo de nombre, que es como el nombre de un . Cada ToggleButton toma un atributo de valor, que funciona como . Si necesitamos marcar previamente cualquiera de las casillas de verificación, lo hacemos con la propiedad defaultValue:

123456789101112131415161718192021constApp=()=>{retorno(<form><label htmlFor='nombre'>Nombre</etiqueta><input id='nombre'/>& lt;label htmlFor='genre'>Género de música favorito</label><ToggleButtonGroup type='checkbox' name='genre' defaultValue={['hip_hop','jazz' ]}><ToggleButton value={'hip_hop'}>HipHop</ToggleButton><ToggleButton value={'jazz'}>Jazz</ToggleButton><ToggleButton value={' country'}>Country</ToggleButton></ToggleButtonGroup><Tipo de botón='submit'>Submit</Button></form>);};</pre
js

Lo mismo funcionaría con los botones de radio, excepto que sólo tendría una opción preseleccionada:

1234567891011121314151617constApp=()=>{retorno(… <ToggleButtonGroup type='radio' name='genre' defaultValue={['jazz']}>< ToggleButton value={'hip_hop'}>HipHop</ToggleButton><ToggleButton value={'jazz' }>Jazz</ToggleButton><ToggleButton value={'country'}>Country< /ToggleButton></ToggleButtonGroup><Tipo de botón='submit'>Submit</Button>. ..);};};/pre
js

Estados controlados

El uso de React para controlar el estado de las entradas de forma está muy extendido. Controlar el estado significa que una variable de estado tiene el valor de una entrada dentro de un componente de React. No hay nada especial que necesites hacer en un componente de React para que esto funcione. Necesitas crear una propiedad de estado en tu componente, y necesitas crear una función que actualice el valor de state's cuando la entrada del formulario cambie.

12345678910111213141516171819202122constApp=()=>{const[genre, setGenre]=React.useState();consthandleGenreChange=(selectedValue)=>{setGenre(selectedValue)}return(… <ToggleButtonGroup type='checkbox' name='genre' value={genre} onChange={handleGenreChange}><ToggleButton value={'hip_hop'}>HipHop</ToggleButton><ToggleButton value={' jazz'}>Jazz</ToggleButton><ToggleButton value={'country'}>Country< /ToggleButton></ToggleButtonGroup><Tipo de botón='submit'>Submit</Button>. ..);};};/pre
js

Estado de carga

También podemos añadir un estado de carga a nuestros botones. Añadir un estado de carga es útil cuando necesitamos hacer una solicitud de red cuando un usuario hace clic en un botón. Queremos asegurarnos de que sólo puedan hacer clic en el botón una vez mientras la red espera para responder.

1234567891011121314151617181920212223242526272829303132333435363738394041constApp=()=;{const[isLoading, setIsLoading]=Reaccionar. useState(false);React.useEffect(()= &gt {if(isLoading){fetch($0027http://someAPI$0027).then(response=§; response.json()).then(success=§;{setIsLoading(false);}). catch(e={{{setIsLoading(false);});}},[isLoading]);constsubmitForm=()={{{{{setIsLoading(true);}};return(<form{{{i};};label htmlFor=$0027name$0027>Name<  <ToggleButton value={$0027hip_hop$0027};HipHop</ToggleButton Valor de ToggleButton={$0027country$0027};Country</ToggleButton&&&;/ToggleButtonGroup&&;Tipo de botón=$0027submit$0027 desactivado={isLoading} onClick={! isLoading ? submitForm :null};Submit</Button;</form;);};

js