¿Podemos escribir el código en una versión más corta?
Por ejemplo:
function Account() { const [code, setCode] = useState('') return <input onChange={(e) => setCode(e.target.value)} /> }¿Podríamos hacerlo aún más corto como sin crear una nueva función? Me gusta:
<input onChange={setCode} />¿De alguna manera?
¡Mejor!
Podrías usar un ayudante useEventState personalizado que envuelva useState de React y agregue un setter adicional a la tupla (matriz) que devuelve:
const useEventState = value => { const [ initialValue, directSetter ] = useState(value); return [ initialValue, directSetter, e => directSetter(e.target.value) ]; } Creo que tiene sentido devolver también el setter original que toma un valor directamente. Si solo configura code a través de un evento onChange , incluso podría reemplazarlo con el e.target.value uno.
Aquí hay un ejemplo rápido (en el que agregué un botón que usa el setter directo para mostrar que aún es útil incluirlo):
function Account() { const [code, setCode, setCodeFromEvent] = useEventState(''); const toUpper = () => { setCode(code.toUpperCase()); } return ( <div> <input value={code} onChange={setCodeFromEvent} /> <p>Your code: {code}</p> <button onClick={toUpper}>To upper case</button> </div> ); } ReactDOM.render( <Account />, document.body ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script> const { useState } = React; const useEventState = value => { const [ initialValue, directSetter ] = useState(value); return [ initialValue, directSetter, e => directSetter(e.target.value) ]; } </script>