从无状态子组件更改我的父组件的状态答案

【问题标题】：Changing the state of my parent component from a stateless child component从无状态子组件更改我的父组件的状态
【发布时间】：2020-03-17 15:32:04
【问题描述】：

我想从无状态组件 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 更改状态，我可以将道具从父级传输到子级，但我不知道如何取回更新父级中的状态的值。

【问题讨论】：

标签： javascript reactjs react-native state

【解决方案1】：

在 PaymentScreen 中，创建一个更改所需字段的函数。例如：

const changeText = (text) => { setText(text) }

然后，将此函数作为道具传递给 OverlayAddAddress。然后，在 OverlayAddAddress 组件中使用它来更改父值。例如：

<TextInput
   style={styles.input}
   keyboardType="decimal-pad"
   placeholder="Numéro de téléphone"
   onChangeText={phoneNumber => setText(phoneNumber)}
   value={phoneNumber}
 />

【讨论】：

【解决方案2】：

对于那些你想从无状态的compnnet中更新父类状态的情况，你需要传递一个函数来更新父类中的状态

在你的情况下，你有 onChange 改变一个道具，它是状态的副本

     <TextInput
       style={styles.input}
       placeholder="Adresse"
       onChangeText={address => address} // this line should be passed from the parent 
       value={address}
     />

所以解决方案是使 onChangeText 成为一个道具，以便父母像这样传递该功能，

 <TextInput
       style={styles.input}
       placeholder="Adresse"
       onChangeText={props.onAddressChange}
       value={address}
     />

在父组件中这样做

<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}
  />

【讨论】：