Tengo dos componentes, el componente principal de la aplicación y un componente secundario (componente de casilla de verificación) en este escenario. Tengo una casilla de verificación dentro del componente secundario cuando se hace clic o se marca esta casilla de verificación.
Quiero que el resultado se muestre en la consola solo cuando se haga clic en un botón dentro del componente principal. Lo que tengo actualmente solo se muestra en la consola cuando la casilla de verificación está marcada y esto sucede dentro del componente secundario.
import { useState } from "react"; // import Checboxtest from "./Checkboxtest"; import "./styles.css"; // const Person = props => ( const Checboxtest = ()=> { const [isChecked, setIsChecked] = useState(false); const [checkboxvalue, setcheckboxvalue] = useState(""); const handleOnChange = (e) => { setIsChecked(!isChecked); setcheckboxvalue(e.target.value); }; return ( <div className="App"> <h1>Checkbox Value </h1> <input type="checkbox" id="Orange" name="Orange" value="Orange" checked={isChecked} onChange={handleOnChange} /> Orange {isChecked ? console.log(checkboxvalue) : console.log("nill")} </div> ); } export default function App() { return ( <div className="App"> <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1> <button>See checkbox value</button> <Checboxtest /> </div> ); }Necesita otro valor de state para controlar este escenario. Se puede implementar en su componente de App o dentro de su componente Checkbox .
Implementemos el estado en el componente principal, así que defina un estado en el componente de la App :
export default function App() { // create a state value const [showResult, setShowResult] = useState(false); // create handler const handleShowResult = () => setShowResult(prevState => !prevState) return ( <div className="App"> <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1> <button onClick={handleShowResult}>See checkbox value</button> <Checboxtest showResult={showResult}/> </div> ); } Al hacer clic en el botón, el valor de showResult cambiará. los accesorios showResult pasarán el estado de visibilidad del resultado de la casilla de verificación al componente Checkbbox .
Ahora, implemente los accesorios showResult en la Checkbox de verificación:
const Checboxtest = ({showResult})=> { const [isChecked, setIsChecked] = useState(false); const [checkboxvalue, setcheckboxvalue] = useState(""); const handleOnChange = (e) => { setIsChecked(!isChecked); setcheckboxvalue(e.target.value); }; return ( <div className="App"> <h1>Checkbox Value </h1> <input type="checkbox" id="Orange" name="Orange" value="Orange" checked={isChecked} onChange={handleOnChange} /> // check showResult value Orange {showResult ? console.log(checkboxvalue) : console.log("nill")} </div> ); }Puede administrar el estado en el componente principal, es decir, en App.js y pasar isChecked y changeCheckBoxValue a Checboxtest . de modo que el valor marcado se propaga al valor principal y cuando hace clic en el botón, el componente App.js tiene todos los detalles.
Aplicación.js
import React, { useState } from 'react'; // import Test from './Test'; import Checboxtest from './Checboxtest'; const App = () => { const [isChecked, setIsChecked] = useState( false ); const [checkboxvalue, setcheckboxvalue] = useState("nil"); const changeCheckBoxValue = (e) => { const val = e.target.value; setIsChecked(state => !state); isChecked ? setcheckboxvalue("nil"): setcheckboxvalue(val); } const seeCheckedValue = () => { console.log( checkboxvalue ) } return ( <div> <div className="App"> <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1> <button onClick={seeCheckedValue}>See checkbox value</button> <Checboxtest isChecked={isChecked} changeCheckBoxValue={changeCheckBoxValue} /> </div> </div> ); }; export default App;Componente de prueba de caja de verificación
const Checboxtest = ( { isChecked, changeCheckBoxValue } ) => { return ( <div className="App"> <h1>Checkbox Value </h1> <input type="checkbox" id="Orange" name="Orange" value="Orange" checked={isChecked} onChange={changeCheckBoxValue} /> Orange </div> ); } export default Checboxtest