[英]Changing the state of my parent component from a stateless child component
I want to change the state of my component PaymentScreen
from a stateless component OverlayAddAddress
我想
PaymentScreen
状态组件OverlayAddAddress
更改我的组件PaymentScreen
的状态
Inside of the OverlayAddAddress
I have this :在
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>
)
}
And inside the parent component I have this :在父组件中,我有这个:
<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}
/>
My problem is when is want to change the state from the textInput inside OverlayAddAddress, I can transfer the props from parent to child but I don't how to get back the value for updating the state in the parent.我的问题是当想要从 OverlayAddAddress 内的 textInput 更改状态时,我可以将道具从父级转移到子级,但我不知道如何取回更新父级中状态的值。
In PaymentScreen, create a function that changes the desired field.在 PaymentScreen 中,创建一个更改所需字段的函数。 For example:
例如:
const changeText = (text) => { setText(text) }
Then, pass this function as props to OverlayAddAddress.然后,将此函数作为道具传递给 OverlayAddAddress。 Then, use it inside your OverlayAddAddress component to change the parent value.
然后,在 OverlayAddAddress 组件中使用它来更改父值。 For example:
例如:
<TextInput
style={styles.input}
keyboardType="decimal-pad"
placeholder="Numéro de téléphone"
onChangeText={phoneNumber => setText(phoneNumber)}
value={phoneNumber}
/>
for those situations where you want to update the state of the parent from inside a stateless compnnet, you need to pass a function that updates the state in the parent class对于那些想要从无状态组件内部更新父类状态的情况,您需要传递一个函数来更新父类中的状态
in your case you have the onChange that mutates a prop, which is a copy of the state在你的情况下,你有一个改变道具的 onChange,它是状态的副本
<TextInput
style={styles.input}
placeholder="Adresse"
onChangeText={address => address} // this line should be passed from the parent
value={address}
/>
so the solution is to make the onChangeText a prop so that the parrent passes that function like so,所以解决方案是使 onChangeText 成为一个道具,以便父级像这样传递该函数,
<TextInput
style={styles.input}
placeholder="Adresse"
onChangeText={props.onAddressChange}
value={address}
/>
and in the parent component do this并在父组件中执行此操作
<OverlayAddAddress
isOverlayVisible={this.state.overlayAddAdress}
onBackdropPress={() => this.setState({overlayAddAdress: false})}
address={this.state.address}
onAddressChange={(value) => setState({address: value})} // will do the trick for you
city={this.state.city}
zipCode={this.state.zipCode}
phoneNumber={this.state.phoneNumber}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.