0
149
VistasEl botón no ejecuta ambas funciones al pasar el estado y los accesorios
Soy nuevo en reaccionar y he encontrado un problema para el que no he encontrado ninguna solución desde hace un tiempo.
El botón SIGUIENTE es un componente secundario de Form1 y se declara en App.js. Los parámetros del archivo Form1 son (props, {transform, fram}). La intención con los accesorios es declarar {props.children} en Form1 para que permita que se muestre el botón Siguiente al implementarse en App.js.
Cuando se implementa de esta manera, el siguiente botón solo parece ejecutar 1 función en lugar de 2: handleNext() pero no fram(). Fram() establece el valor de translateX en form1. handleNext controla el estado de los Pasos a Paso Personalizados.
Sin embargo, si los "accesorios" se eliminan de Form1 y el botón se quita de las etiquetas y se coloca, por ejemplo, encima de la etiqueta de Pasos a paso personalizados, ejecuta ambas funciones. Quiero que el botón se implemente de la manera que se muestra a continuación, pero no funciona según lo previsto Mi App.js:
import {Form1, Form2, Form3, Form4} from './components'; import {Header} from './containers'; import {Section} from './containers'; import {Forms} from './containers' import CustomizedSteppers from './components/stepper/demo'; const App = () => { const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { setActiveStep((activeStep+1)); }; const [transform, transformit] = React.useState("TranslateX(0px)"); const fram = () => { transformit("TranslateX(-900px)"); }; return ( <> <Header /> <Section class="section"> <CustomizedSteppers activeStep={activeStep} handleNext={handleNext}/> <Forms> <Form1 transform={transform} fram={fram}> <button id="B "onClick={() => {handleNext();fram();}}>NEXT</button> </Form1> <Form2 /> <Form3 /> <Form4 /> </Forms> </Section> </> ); } export default App;Mi Form1.js:
export default function Form1(props, {transform, fram}){ return ( <div id='Form1' style={{transform: transform}}> <p id="demo"></p> <div class="btn-box-f1"> {props.children} </div> </div> ) }2 Respuestas
Responde la pregunta0
Por lo que puedo decir, el problema está en la forma en que ha declarado los accesorios del componente Form1 . Los componentes de React toman solo un único argumento, el objeto props . function Form1(props, { transform, fram }) no es válida, no se puede acceder al accesorio de transform en el componente, no está definido.
Aquí está la versión de trabajo:
function Form1({ children, transform }) { return ( <div id="Form1" style={{ transform: transform }}> <p id="demo"></p> <div className="btn-box-f1">{children}</div> </div> ); } 
Descarté registros en ambas devoluciones de llamada y vi correctamente ambos activados y veo la transform aplicada al elemento div id="Form1" .
Aquí se hizo clic en el botón "siguiente", se registraron ambas devoluciones de llamada, se actualizó el estado del paso activo a 1 y se aplicó la transformación.
0
En lugar de intentar llamar a dos funciones, llama primero a la función que actualiza el estado y luego usa useEffect para monitorear ese cambio de estado.
El useEffect :
useEffect(() => { transformit('TranslateX(-900px)'); }, [activeStep]);Y el botón actualizado:
<button id="B" onClick={handleNext}>NEXT</button> Ah, y no es necesario tener paréntesis dobles en su función setActiveStep :
setActiveStep(activeStep + 1);