Tengo esta función llamada handleSelectProduct en ProductComponent y quería detectarla en ProductDetailsComponent . Si se llama a handleSelectProduct en ProductComponent , entonces quiero ejecutar una determinada función en ProductDetailsComponent usando useEffect .
ProductoComponente
const ProductComponent = () => { const [selectedProduct, setProduct] = useState(null); const handleSelectProduct = (event) => { setProduct(event.target.value); }; return ( <div> <Select value={selectedProduct} onChange={(e) => handleSelectProduct(e)} > {(products || []).map(({ id, name }) => ( <MenuItem value={id}>{name}</MenuItem> ))} </Select> <ProductDetailsComponent handleSelectProduct={handleSelectProduct} /> </div> ); }; export default ProductComponent;ProductoDetallesComponente
const ProductDetailsComponent = ({ handleSelectProduct }) => { useEffect(() => { handleSelectProduct ? formik.setFieldValue("productInfo", "") : null; }, [handleSelectProduct]); }; export default ProductDetailsComponent;Si el componente hijo quiere saber si/cuándo se llamó a una función en el componente padre, entonces el padre debe pasarle un accesorio al hijo informándole de la condición. Es posible que también deba pasar una función al niño para que el niño "reconozca" que "vio" que se llamó a la función para que el padre pueda "restablecer".
const ProductComponent = () => { const [triggered, setTriggered] = React.useState(false); const handleSelectProduct = (event) => { setTriggered(true); }; const reset = () => { console.log("Parent trigger was reset"); setTriggered(false); }; return ( <div> Parent <button disabled={triggered} type="button" onClick={handleSelectProduct}> Trigger? </button> <ProductDetailsComponent triggered={triggered} reset={reset} /> </div> ); }; const ProductDetailsComponent = ({ triggered, reset }) => { React.useEffect(() => { if (triggered) { console.log("Child saw fn triggered in parent"); setTimeout(reset, 1000); } }, [reset, triggered]); return <div>Child</div>; }; ReactDOM.render( <ProductComponent />, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />Una alternativa también podría ser un recuento de invocaciones de función simple que se incrementa, luego el niño solo necesita ver que se incrementó el recuento.
const ProductComponent = () => { const [triggered, setTriggered] = React.useState(0); const handleSelectProduct = (event) => { setTriggered(c => c + 1); }; return ( <div> Parent <button type="button" onClick={handleSelectProduct}> Trigger? </button> <ProductDetailsComponent triggered={triggered} /> </div> ); }; const ProductDetailsComponent = ({ triggered }) => { React.useEffect(() => { if (triggered) { console.log("Child saw fn triggered in parent"); } }, [triggered]); return <div>Child</div>; }; ReactDOM.render( <ProductComponent />, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />Si se llama a
handleSelectProductenProductComponent, entonces quiero ejecutar una determinada función enProductDetailsComponent
No creo que eso sea exactamente lo que realmente quieres. Si los componentes estuvieran tan estrechamente acoplados, debería usar un solo componente. El comportamiento ProductDetailsComponent debe depender solo de sus accesorios y su estado interno.
Lo que realmente desea es llamar a una determinada función en ProductDetailsComponent siempre que cambie el producto seleccionado . Puede hacerlo, como ya notó, usando useEffect , pero con el producto como una dependencia. Solo tiene que pasar el producto selectedProduct como accesorio al componente en lugar de la función handleSelectProduct .
const ProductComponent = () => { const [selectedProduct, setProduct] = useState(null); return ( … <ProductDetailsComponent selectedProduct={selectedProduct} /> ); }; const ProductDetailsComponent = ({ selectedProduct }) => { useEffect(() => { if (selectedProduct) formik.setFieldValue("productInfo", ""); }, [selectedProduct]); };