Estoy usando NextJS con bulma CSS para crear una aplicación simple. Tengo este siguiente formulario:
const MyPage = () => { const [firstName, setFirstName] = useState('') const [secondName, setSecondName] = useState('') const updateFirstName = event => { setFirstName(event.target.value) } const updateSecondName = event => { setSecondName(event.target.value) } const createUser = async() => { // Todo: perform some action with firstName and secondName } return ( <section className='mt-5'> <div className='container'> <div className='field'> <label className='label'>My Form</label> <div className='control'> <input onChange={updateFirstName} className='input' type='type' placeholder='Enter First Name'></input> </div> </div> <div className='field'> <div className='control'> <input onChange={updateSecondName} className='input' type='type' placeholder='Enter Second Name'></input> </div> </div> <button onClick={createUser} className='button is-primary'>Create</button> </div> </section> ) } export default MyPage Tengo que llamar a updateFirstName y updateSecondName en cada cambio de entrada. Quiero obtener el valor de estos campos de entrada solo en la llamada a la función createUser() . Sugiera cómo hacerlo o cualquier otro enfoque mejor. Quiero eliminar las variables firstName y secondName, y acceder directamente a la entrada ingresada en la función createUser() .
Si no quieres una entrada controlada. Puede dejar de administrar el estado y acceder a la forma antigua de valor utilizando JS de vainilla simple.
Asegúrese de agregar el atributo de nombre con todos los campos de entrada.
function createUser() { const inputs = document.querySelectorAll(".field input") let data = {} inputs.forEach(input => { data[input.name] = input.value }) /** This would yield you { 'firstname': 'value', 'secondName': 'value' } **/ }Cambie sus campos de entrada como se muestra a continuación:
<input onChange={(e)=>createUser(e,'firstName')} className='input' type='type' placeholder='Enter First Name'></input> <input onChange={(e)=>createUser(e,'lastName')} className='input' type='type' placeholder='Enter First Name'></input>Luego, en su actualización, su función createUser como se muestra a continuación:
const createUser = (event, element) => { if(element==='firstName') { setFirstName(event.target.value) } if(element==='lastName') { setLastName(event.target.value) } }Puedes probar alternativamente con este gancho useRef(),
const MyPage = () => { const firstName = useRef(); const secondaName = useRef(); const createUser = async() => { // Todo: perform some action with firstName and secondName console.log(firstName.current.value, secondName.current.value) // It will prints the value that is typed by the user in both the textfields } return ( <section className='mt-5'> <div className='container'> <div className='field'> <label className='label'>My Form</label> <div className='control'> <input ref={firstName} className='input' type='type' placeholder='Enter First Name'></input> </div> </div> <div className='field'> <div className='control'> <input ref={secondName} className='input' type='type' placeholder='Enter Second Name'></input> </div> </div> <button onClick={createUser} className='button is-primary'>Create</button> </div> </section> ) } export default MyPage