Tengo dos componentes, un componente principal y un componente secundario. Este componente secundario está dentro del componente principal. Dentro del componente secundario, hay una etiqueta que, cuando se hace clic en ella, se almacena un valor en un estado separado. Ahora, cuando se hace clic en un botón dentro del componente principal, se debe imprimir el valor que se almacenó dentro de un estado en el componente secundario. a la consola
// import Checboxtest from "./Checkboxtest"; import "./styles.css"; const Child = ({ showresult, click }) => { const [clickedvalue, setClickedValue] = useState(""); const ItemClicked = (e) => { setClickedValue("Yes"); console.log(clickedvalue); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={ItemClicked}> <input type="checkbox" /> clik me </span> </div> ); }; export default function Parent() { const [clickedvalue, setClickedValue] = useState(""); return ( <div className="App"> <button onClick={()=>{console.log(clickedvalue)}} > See checkbox value </button> <Child setClickedValue={setClickedValue} /> </div> ); } Child nunca usa la propiedad setClickedValue , usa su propia función de actualización de estado setClickedValue . Child tampoco pasa showresult o click props.
Mantenga el estado en el componente principal y pase la función de actualización de estado al componente secundario. Cuando se hace clic en la casilla de verificación en el elemento secundario, llame a la devolución de llamada pasada y pase el nuevo valor al elemento principal.
const Child = ({ setClickedValue }) => { const itemClicked = (e) => { setClickedValue("Yes"); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={itemClicked}> <input type="checkbox" /> </span> </div> ); }; export default function Parent() { const [clickedValue, setClickedValue] = useState(""); return ( <div className="App"> <button onClick={() => { console.log(clickedValue); }} > See checkbox value </button> <Child setClickedValue={setClickedValue} /> </div> ); } const Child = ({ setClickedValue }) => { const itemClicked = (e) => { setClickedValue("Yes"); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={itemClicked}> <input type="checkbox" /> </span> </div> ); }; function Parent() { const [clickedValue, setClickedValue] = React.useState(""); return ( <div className="App"> <button onClick={() => { console.log(clickedValue); }} > See checkbox value </button> <Child setClickedValue={setClickedValue} /> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <Parent />, rootElement ); <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" />Tome un estado como encimeras n componente principal y páselo al componente secundario y, al cambiarlo, use useEffect y el estado secundario de la consola al cambiar ese estado
useEffect(() => { console.log(<child component state here>) }, [props.counter])O si desea pasar el valor del componente secundario al componente principal, puede hacerlo como
<Child setParentState={setParentState} /> <ChildButton onClick={() => props.setParentState(<value here>) }