Tengo un estado como este
const [inputMode, setInputMode] = useState(1);Esto es lo que estoy haciendo para representar y vincular valor al estado.
const renderRadios = () => { if (inputMode == 1) { return ( <> <input defaultChecked type="radio" value="1" onClick={e => setInputMode(parseInt(e.target.value))} /> <input type="radio" value="2" onClick={e => setInputMode(parseInt(e.target.value))} /> </> ); } else if (inputMode == 2) { return ( <> <input type="radio" value="1" onClick={e => setInputMode(parseInt(e.target.value))} /> <input defaultChecked type="radio" value="2" onClick={e => setInputMode(parseInt(e.target.value))} /> </> ); } } return( <h1>Result</h2> {renderRadios()} );¿Hay algún enfoque alternativo mucho más simple? yo prefiero
Parece que todo lo que realmente necesita hacer es hacer que el valor de la propiedad predeterminada defaultChecked sea verdadero o falso, según el estado.
onChange funciona bien, y dado que ya sabe que el valor de las entradas será 1 o 2, puede usarlas directamente en lugar de pasar por parseInt(event.target.value) .
function App() { return ( <> <h1>Result</h1> <input defaultChecked={inputMode === 1} className="form-check-input" type="radio" name="inputMode" value="1" id="tapanddone" onChange={e => setInputMode(1)} /> <input defaultChecked={inputMode === 2} className="form-check-input" type="radio" name="inputMode" value="2" id="logvalue" onChange={e => setInputMode(2)} /> </> ); }Demo en vivo:
function App() { const [inputMode, setInputMode] = React.useState(1); console.log('inputMode', inputMode); return ( <React.Fragment> <h1>Result</h1> <input defaultChecked={inputMode === 1} className="form-check-input" type="radio" name="inputMode" value="1" id="tapanddone" onChange={e => setInputMode(Number(e.target.value))} /> <input defaultChecked={inputMode === 2} className="form-check-input" type="radio" name="inputMode" value="2" id="logvalue" onChange={e => setInputMode(Number(e.target.value))} /> </React.Fragment> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>(¿Alguna forma de alinearlo?)
Si no pudo usar el enfoque anterior, sí, por ejemplo:
return ( <h1>Result</h2> { inputMode === 1 ? ( <> <input> ... </> ) : ( <> <input> ... </> ) } );