Cuando ejecuto el código, los botones no funcionan a menos que elimine onChange. Puedo agregar () al final de mis funciones dentro del clic, pero eso hace que se ejecuten con cada pulsación de tecla. Cómo puedo solucionar esto. No me permite publicar mi pregunta sin más texto, así que agregaré un texto ficticio para publicar.
import React, { useState } from "react"; export default function Username(props) { const [userName, setUsername] = useState(''); let userToken const address = props.address; function handleChange(event) { setUsername(event.target.value); } function loginAccount() { console.log('account created'); } function createAccount() { console.log('logged in'); } function hi(){ console.log('hi'); } while (userToken == null) return ( <> <div> <p className = "account-Info" >address: {address}</p> </div> <div id="form"> <h2 className='user-Create' > Username </h2> <form id='set-User'> <input id='username' className="user-Create" type='text' value={userName} onChange={handleChange} required minLength='3' maxLength='30' pattern="[a-zA-Z0-9_]+" title='only letters, numbers, and underscores.'/> <button className='user-Create' onClick={loginAccount}>Create Account</button> <button className='user-Create' onClick={createAccount}>Login</button> <button className='user-Create' onClick={hi}>hi</button> </form> </div> </> ); while (userToken) return( <p>hello</p> ); }Establezca type="button" para cada botón dentro de su formulario
<button className='user-Create' type="button" onClick={loginAccount}>Create Account</button> <button className='user-Create' type="button" onClick={createAccount}>Login</button> <button className='user-Create' type="button" onClick={hi}>hi</button>formato como este
const FunctionName = (e) => { console.log('account created');