我想从无状态组件OverlayAddAddress
更改我的组件PaymentScreen
的状态
在OverlayAddAddress
里面我有这个:
isOverlayVisible,
onBackdropPress,
address,
city,
zipCode,
phoneNumber,
}) => {
return (
<Overlay
overlayBackgroundColor="#f2f2f2"
isVisible={isOverlayVisible}
onBackdropPress={onBackdropPress}>
<TextInput
style={styles.input}
placeholder="Adresse"
onChangeText={address => address}
value={address}
/>
<TextInput
style={styles.input}
placeholder="Ville"
onChangeText={city => city}
value={city}
/>
<TextInput
style={styles.input}
placeholder="Code postal"
onChangeText={zipCode => zipCode}
value={zipCode}
/>
<TextInput
style={styles.input}
keyboardType="decimal-pad"
placeholder="Numéro de téléphone"
onChangeText={phoneNumber => phoneNumber}
value={phoneNumber}
/>
<TouchableOpacity style={styles.buttonSave}>
<Text style={styles.buttonSaveText}>Enregister</Text>
</TouchableOpacity>
</Overlay>
)
}
在父组件中我有这个:
<OverlayAddAddress
isOverlayVisible={this.state.overlayAddAdress}
onBackdropPress={() => this.setState({overlayAddAdress: false})}
address={this.state.address}
city={this.state.city}
zipCode={this.state.zipCode}
phoneNumber={this.state.phoneNumber}
/>
我的问题是,当想要从 OverlayAddAddress 内的 textInput 更改状态时,我可以将 Prop 从父级传输到子级,但我不知道如何取回更新父级中状态的值。
最佳答案
在 PaymentScreen 中,创建一个更改所需字段的函数。例如:
const changeText = (text) => { setText(text) }
然后,将此函数作为 props 传递给 OverlayAddAddress。然后,在 OverlayAddAddress 组件内使用它来更改父值。例如:
<TextInput
style={styles.input}
keyboardType="decimal-pad"
placeholder="Numéro de téléphone"
onChangeText={phoneNumber => setText(phoneNumber)}
value={phoneNumber}
/>
关于javascript - 从无状态子组件更改父组件的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60725487/