Tengo un componente de página principal en reaccionar cuya función de renderizado se ve así
const MainPage = () => { return ( <> <Component1 /> <Component2 /> </> ) }Y el componente tiene algunas entradas.
const Component1 = () => { const [val1, setVal1] = React.useState(""); const [val2, setVal2] = React.useState(""); return ( <> <input type="text" value={val1} onChange={setVal1} /> <input type="text" value={val2} onChange={setVal2} /> </> ) }Mi pregunta es ¿cómo obtener los valores val1 y val2 en el componente MainPage? Gracias por adelantado
use Redux o Context API en su React Project. Por cierto, puede llamar a la función para obtener el valor de las variables de los componentes secundarios.
Ejemplo Reaccionar usando Clase
class Parent extends Component { constructor() { this.state = { value: '' }; } //... handleChangeValue = e => this.setState({value: e.target.value}); //... render() { return ( <Child value={this.state.value} onChangeValue={this.handleChangeValue} /> ); } } class Child extends Component { //... render() { return ( <input type="text" value={this.props.value} onChange={this.props.onChangeValue} /> ); } }no puedes React se basa en el Unidirectional Data Flow
Entonces, para resolver su problema, debe definir un evento que será llamado desde los niños.
const MainPage = () => { const [val1, setVal1] = React.useState(""); const [val2, setVal2] = React.useState(""); return ( <> <Component1 val1={val1} onChange1={setVal1} val2={val2} onChange2={setVal2} /> <Component2 /> </> ) }y componente1
const Component1 = ({val1, onChange1, val2, onChange2}) => { return ( <> <input type="text" value={val1} onChange={onChange1} /> <input type="text" value={val2} onChange={onChange2} /> /> </> ) }