是否可以将状态从子组件设置为父组件？

Question

我有一个父屏幕，使用模式查看交易。我想在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

使父组件取决于状态。即

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>

Answer 2

只需创建一个方法来更改isModalVisible值。然后将该方法传递给您的<AddTrade callback={method} />。

然后在子组件中，当按下Button时调用此回调方法。

Answer 3

您可以在此方法上使用renderProps方法。

您的Modal组件在render方法中的某个位置呈现children属性。不仅仅是渲染children prop，还可以将其作为函数children(...)调用并传递所需的任何参数（在您的情况下，传递Modal的onRequestClose函数）。

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