javascript - practicas - react js change title

React js cambia el estado del componente hijo del componente padre

Question

Tengo dos componentes: Componente principal desde el que quiero cambiar el estado del componente secundario:

class ParentComponent extends Component {
toggleChildMenu() {
?????????
}
render() {
return (
<div>
<button onClick={toggleChildMenu.bind(this)}>
Toggle Menu from Parent
</button>
<ChildComponent />
</div>
);
}
}

Y componente infantil :

class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
open: false;
}
}
toggleMenu() {
this.setState({
open: !this.state.open
});
}
render() {
return (
<Drawer open={this.state.open}/>
);
}
}

¿Necesito cambiar el estado abierto del componente secundario desde el componente principal o llamar toggleMenu () del componente secundario desde el componente principal cuando se hace clic en el botón del componente principal?

Answer 1

El componente padre puede administrar el estado hijo pasando un accesorio a hijo y el hijo convierte este accesorio en estado usando componentWillReceiveProps.

class ParentComponent extends Component {
state = { drawerOpen: false }
toggleChildMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen })
}
render() {
return (
<div>
<button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
<ChildComponent drawerOpen={this.state.drawerOpen} />
</div>
)
}
}
class ChildComponent extends Component {
constructor(props) {
super(props)
this.state = {
open: false
}
}
componentWillReceiveProps(props) {
this.setState({ open: props.drawerOpen })
}
toggleMenu() {
this.setState({
open: !this.state.open
})
}
render() {
return <Drawer open={this.state.open} />
}
}

Answer 2

El estado debe administrarse en el componente principal. Puede transferir el valor open al componente secundario agregando una propiedad.

class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};
this.toggleChildMenu = this.toggleChildMenu.bind(this);
}
toggleChildMenu() {
this.setState(state => ({
open: !state.open
}));
}
render() {
return (
<div>
<button onClick={this.toggleChildMenu}>
Toggle Menu from Parent
</button>
<ChildComponent open={this.state.open} />
</div>
);
}
}
class ChildComponent extends Component {
render() {
return (
<Drawer open={this.props.open}/>
);
}
}

Answer 3

La respuesta anterior es parcialmente correcta para mí, pero en mi escenario, quiero establecer el valor en un estado, porque he usado el valor para mostrar / alternar un modal. Así que he usado como a continuación. Espero que ayude a alguien.

class Child extends React.Component {
state = {
visible:false
};
handleCancel = (e) => {
e.preventDefault();
this.setState({ visible: false });
};
componentDidMount() {
this.props.onRef(this)
}
componentWillUnmount() {
this.props.onRef(undefined)
}
method() {
this.setState({ visible: true });
}
render() {
return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
{"Content"}
</Modal>)
}
}
class Parent extends React.Component {
onClick = () => {
this.child.method() // do stuff
}
render() {
return (
<div>
<Child onRef={ref => (this.child = ref)} />
<button onClick={this.onClick}>Child.method()</button>
</div>
);
}
}

Referencia: https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Answer 4

Puede enviar un accesorio desde el padre y usarlo en el componente hijo para basar los cambios de estado del niño en los cambios de apoyo enviados y puede manejar esto usando getDerivedStateFromProps en el componente hijo.