Question

0

164

Views

¿Cómo renderizar radios de manera óptima y vincular valores cambiantes con React y JSX?

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

Representación en línea dentro de la declaración de retorno, en lugar de usar una función de flecha separada para representar radios * usando múltiples escaleras if-else (¿Alguna forma de alinearlo?)
¿El enlace onClick es correcto para establecer el valor en el estado? Probé onChange pero no funciona de alguna manera
Esto funciona bien para mí, pero estoy buscando una versión optimizada del código.
Aquí, estoy configurando defaultChecked en función de los casos if-else, ¿cuál es la mejor manera de alinear esto y reducir el código?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T10:22:42.225Z

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> ... </> ) } );

0

164

¿Cómo renderizar radios de manera óptima y vincular valores cambiantes con React y JSX?

1 answers

0

Find remote jobs

Andres GPT