Обновление состояния родительского или родительского компонента в React Native
Новичок в React native и ищите подсказку, как это сделать лучше всего.
У меня есть компонент экрана, содержащий модальный компонент, а модальный компонент содержит компонент «Контакты» со списком флажков «Контакты». После нажатия кнопки в модальном окне я хочу обновить состояние компонента экрана.
<Modal animationType = "slide"
transparent = {false}
visible = {this.state.contactModalVisible}
onRequestClose = {()=> {
this.setState({ contactModalVisible: false});
}}>
<ContactList // On pressAButtonInsideHere, how do I update the Screen state? />
</Modal>
Должен ли я поместить кнопку внутри модального компонента и сначала обновить модальный компонент с помощью компонента ContactList? Или можно обновить экран прямо из ContactList?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Допустимо обновлять состояние экрана из вложенного компонента (т.е. чего-то внутри вашего компонента <ContactList />). Есть несколько подходов к этому, и наиболее подходящий подход будет зависеть от ваших требований. Однако простой способ сделать это - добавить обратный вызов к <ContactList />.
Так, например, вы можете добавить следующий обратный вызов onButtonPress:
<Modal
animationType = "slide"
transparent = {false}
visible = {this.state.contactModalVisible}
onRequestClose = {() => {
this.setState({ contactModalVisible: false});
}}>
<ContactList onButtonPress = { () => this.setState({ yourChange : true }) }
// On pressAButtonInsideHere, how do I update the Screen state?
/>
</Modal>
А затем обновите компонент <ContactList />, чтобы активировать обратный вызов onButtonPress при нажатии (внутреннего) компонента кнопки. Чтобы проиллюстрировать общую идею, рассмотрим этот макет для <ContactList />:
import { Button } from 'react-native'
const ContactList = () => {
return (<Button onPress = { () => this.props.onButtonPress() }
title = "Button in contact list" />)
}
Отлично работает, спасибо, Дакр Денни. Чего мне не хватало, так это `` реквизита '' в this.props.onButtonPress ()