Переключить логическое состояние между родительским компонентом
Ищете способ переключения логического значения состояния в дочернем компоненте из метода в родительском компоненте.
Родительский элемент содержит метод для открытия контактной формы.
handleContact() {
this.setState({
contactOpen: !this.state.contactOpen,
});
}
Дочерний компонент ContactForm имеет состояние для thankYou (логическое значение), которое получает значение true при отправке формы.
Проблема заключается в том, что когда родительский метод для открытия контактной формы вызывается после того, как форма уже отправлена, сообщение с благодарностью остается на экране.
Я попытался переместить состояние thankYou в родительский элемент, создать метод showThankYou в родительском элементе и передать его дочернему элементу ContactForm. Кажется, что функция не запускается, и этот способ может быть слишком сложным.
Есть ли другой способ обновить логическое состояние в дочернем компоненте из метода handleContact в родительском?
Да, имейте логическое состояние в родительском элементе и обновите это логическое значение своей функцией. Затем передайте его как опору своему ребенку. Тогда вы сможете делать с ним все, что захотите. В жизненных циклах вашего дочернего компонента вы можете взять его и кое-что с ним сделать. GetDerivedStateFromProps, WillUpdate, didUpdate
@Nicholas В итоге я использовал componentDidUpdate так, как вы предложили. Спасибо.
@kalecrush рад, что смог помочь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
handleContact() {
const contact = !this.state.contactOpen;
this.setState({
contactOpen: contact
});
}
Исправлено Николасом (https://stackoverflow.com/users/2836350/nicholas) (думаю, я уже пробовал этот подход и у меня не сработало, поэтому я использую тот, который указан выше):
handleContact=()=> this.setState(prevState=>({contactOpen: !prevState.contactOpen}))
Однако главный вопрос заключался в том, как изменить состояние благодарности.
тем не менее, ваш метод handleContact все равно не сработает: D, возможно, вы нашли здесь 2 проблемы: D
Я предлагаю вам иметь один childComponent для вашей формы и childComponent / (просто jsx) для вашего сообщения с благодарностью и отображать оба в родительском компоненте следующим образом:
// Parent
constructor(props) {
super(props);
this.state = {
contactOpen: true,
showThankU: false
}
}
onSubmit(params) {
// Do the submission process
this.setState({showThankU: true, contactOpen: false}, () => {
// in the callback use setTimout
// to hide thank you box after desired seconds
setTimeout(() => this.setState({showThankU: false), 10000);
});
}
render() {
return (
<div>
{/* if you would like to hide it after submit use this.state.contactOpen && */}
{this.state.contactOpen &&
<ContactsForm onSubmit = {this.onSubmit.bind(this)}/>
}
{/* Whatever your thank you message (childComponet or just jsx) is: */}
{this.state.showThankU && <ThankYouMessage {...props} />
</div>
);
}
если вы хотите обрабатывать все в компоненте contactForm, вы должны передать обратный вызов от родителя к дочернему (contactForm) и изменить состояние отображения сообщения или нет, а также передать это как другой реквизит в contactForm:
<ContactsForm
showMessage = {this.state.showMessage}
onSubmit = {() => {
this.setState({showMessage: true});
}}
{/* Other props */}
/>
Также имейте в виду, что когда вы хотите передать обратный вызов дочернему элементу, вы должны быть осторожны с это JavaScript:
для этого вы можете связать свои методы следующим образом:
// in constructor
this.myMethod = this.myMethod.bind(this)
// Or use ES6 and callback
<ChildComponent
myProp = {() => this.myMethod()}
/>
// Or bind when passing to child
<ChildComponent
myProp = {this.myMethod.bind(this)}
/>
Сообщение с благодарностью в этом случае не будет работать как отдельный компонент, но спасибо за тщательно написанный код.
ContactForm (дочерний элемент) должен управлять только изменениями ввода и отображением формы (в конечном итоге отправкой). Решение о том, нужно ли вам отображать ContactForm или другой компонент с сообщением «спасибо» (назовите его SuccessMessage или как-то еще), должен принимать родительский (контейнерный) компонент. Просто создайте логическое свойство состояния в родительском элементе, чтобы сохранить то, что должно быть отображено, и отобразите один из дочерних компонентов в соответствии с его значением.