Изменение состояния моего родительского компонента от дочернего компонента без сохранения состояния

Question

Я хочу изменить состояние моего компонента PaymentScreen из компонента без состояния OverlayAddAddress

Внутри 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}
  />

Моя проблема в том, когда я хочу изменить состояние с textInput внутри OverlayAddAddress, я могу передать реквизиты от родителя к потомку, но я не могу вернуть значение для обновления состояния в родительском.

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

Answer 2

для тех ситуаций, когда вы хотите обновить состояние родителя изнутри компа без состояния nnet, вам нужно передать функцию, которая обновляет состояние в родительском классе

, если у вас есть onChange, который мутирует реквизит, который является копией состояния

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

, поэтому решение состоит в том, чтобы сделать onChangeText реквизитом так, чтобы parrent передавал эту функцию следующим образом:

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