Есть ли способ установить состояние от дочернего компонента к родительскому компоненту?

Question

У меня есть родительский экран View Trade с модалом. Я хочу закрыть этот модал, когда на экране AddTrade нажата кнопка закрытия. Аппаратная кнопка возврата отключена, но можно ли имитировать нажатие аппаратной кнопки? Я хочу закрыть модальный режим при нажатии кнопки отправки, но оба находятся на другом экране.

//View Trade
render() {
    const {
      navigation,
    } = this.props;
    return (      
      <View style={{padding: 10}}>
        <View style={{flexDirection: 'row', borderWidth: 2}}>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <TextInput placeholder="City" />
          </View>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <TextInput placeholder="Pokemon" />
          </View>
          <Icon
            name="search"
            type="font-awesome"
            iconStyle={{
              color: '#e6f2fd',
              backgroundColor: '#2096f3',
              padding: 10,
              marginVertical: '10%',
            }}
            onPress={() => {
              console.log('search');
            }}
          />
        </View>
        {this._makeCards()}
        <TouchableOpacity
          onPress={() => {
            console.log('add');
            // this.props.navigation.navigate('Add Trades')
            this.setState({isModalVisible:!this.state.isModalVisible})
          }}
          style={{
            position: 'absolute',
            height: '10%',
            width: '20%',
            bottom: '8%',
            right: '3%',
          }}>
          <View>
            <Image source={require('../assets/images/float-add-icon.png')} />
          </View>
        </TouchableOpacity>
        <Modal visible={this.state.isModalVisible} onRequestClose={()=>{this.setState({isModalVisible:!this.state.isModalVisible})}} style={{margin:0,flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <AddTrades navigation={this.props.navigation}/>
        </Modal>
      </View>
    );
  }

//AddTrade
return (
      <View>
        <View style={[styles.app, {justifyContent: 'center'}]}>
          <Picker
            style={styles.picker}
            selectedValue={this.state.WhatTheyGive}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({WhatTheyGive: itemValue})
            }>
            {this.addPicker()}
          </Picker>
          <TextInput placeholder="Enter CP" style={styles.textInput} />
          <TextInput placeholder="Enter city" style={styles.textInput} />
          <Picker
            style={styles.picker}
            selectedValue={this.state.whatTheyWant}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({whatTheyWant: itemValue})
            }>
            {this.addPicker()}
          </Picker>
          <View style={styles.button}>
            // I want to hide modal when this is pressed.
            <Button title="Submit" onPress={this._onSubmit} />
          </View>
        </View>
      </View>
    );
  }

Answer 1

просто создайте метод для изменения значения isModalVisible. затем передайте метод вашему <AddTrade callback={method} />.

Затем в дочернем компоненте вызовите этот метод обратного вызова при нажатии кнопки.

Answer 2

Вы можете использовать renderProps подход на этом.

Ваш Modal компонент где-то в render методе рендерит children prop. Вместо того, чтобы просто выводить children prop, вызовите его как функцию children(...) и передайте любые аргументы, которые вы хотите (в вашем случае, передайте Modal 'onRequestClose function).

// somethere in the render method:
   {children(props.onRequestClose)}

Впоследствии вместо рендеринга <AddTrades /> как есть, передайте выражение, которое является функцией, содержащей ваш экземпляр AddTrades (с вашей функцией onRequestClose в качестве аргумента!). Передайте эту функцию своему AddTrades легко (и любому другому модальному потомку).

<Modal visible={this.state.isModalVisible} onRequestClose={()=>{this.setState({isModalVisible:!this.state.isModalVisible})}}>
    {(onRequestClose) => <AddTrades onRequestClose={onRequestClose} />}
</Modal>

В конце просто вызовите props.onRequestClose в AddTrades компоненте.

Answer 3

Сделать родительский компонент зависимым от состояния. т.е.

constructor(props) {
super(props);
this.state = {
  childValue: false
} }

<View style={{backgroundColor:this.state.childValue?"red":"green"}}> //Parent View
       <TouchableOpacity onPress={() => this.setState({childValue:true)}> //ChildrenView 
<Text>Click Me</Text>
</TouchableOpacity>
    </View>