Trabajo en React Project y tengo algunas funciones que definen algunas condiciones cuando renderizo los componentes en la página, pero necesito volver a llamar a todas las funciones en los componentes cuando hago clic en el botón y renderizo números aleatorios.
ejemplo:
export default function App(){ func1(){ // some func //brings random number } func2(){ // some func //brings random number } func3(){ // some func //brings random number } const definedOne = func1(); const definedTwo = func2(); const defineTree = func3(); return( <div>{definedOne}<div> <div>{definedTwo}<div> <div>{definedTree}<div> <button onClick={// what need to click?}>Run Functions Again</button> ) }Su código para React está incompleto. Para que un botón funcione, necesita un código como este:
<Button variant="outline-secondary" id="button-addon2" disabled={email === ''} onClick={() => sendReport()}> Send report </Button>Ahora esto llamará a una función llamada sendReport(). Por ejemplo:
const sendReport = async () => { service.mailItem(email).catch((e) => {setError(e.message)}); }
Su código no tiene método onClick() .
Sus tres números deben moverse al estado , lo que le permite actualizarlos al hacer clic.
Use una función handleClick para actualizar las tres variables de estado.
export default function App(){ func1(){ // some func //brings random number } func2(){ // some func //brings random number } func3(){ // some func //brings random number } handleClick(){ setDefinedOne(func1()); setDefinedTwo(func2()); setDefinedThree(func3()); } const [definedOne, setDefinedOne] = useState(func1()); const [definedTwo, setDefinedTwo] = useState(func2()); const [definedThree, setDefinedThree] = useState(func3()); return( <div>{definedOne}<div> <div>{definedTwo}<div> <div>{definedTree}<div> <button onClick={handleClick}>Run Functions Again</button> ) }La función onClick se puede usar así:
onClick = {handleClickFn}
o
onClick = {(e) => handleClickFn(e)}
Ambos funcionan bien.
export default function App(){ const handleClickFn = (e) => { console.log("You clicked button"); func1(); func2(); func3(); } func1(){ // some func //brings random number } func2(){ // some func //brings random number } func3(){ // some func //brings random number } const definedOne = func1(); const definedTwo = func2(); const defineTree = func3(); return( <div>{definedOne}<div> <div>{definedTwo}<div> <div>{definedTree}<div> <button onClick={handleClickFn}>Run Functions Again</button> ) }