Question

我在React-native中使用 Modal 展示了一个组件。因此，在Child组件（以Modal形式出现在父组件顶部的组件）中，我正在尝试更新父组件的状态变量，但它会抛出错误，例如在道具验证中缺少“ 'changeModalVisibility' >”。

请帮助我解决这个问题。

相关代码如下：

// Parent Class in render
<SafeAreaView style={styles.container}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.isModalVisible}
          onRequestClose={() => { this.changeModalVisibility(false) }}
        >
          <ChildClass
            changeModalVisibility={this.changeModalVisibility}
          />
        </Modal>
</SafeAreaView>
// Outside Render function
changeModalVisibility = (bool) => {
 this.setState({ isModalVisible: visible });
}

// In Child Class 
<TouchableHighlight
              underlayColor="none"
              onPress={this.props.closeButtonTapped}
              style={{ alignItems: 'center', justifyContent: 'center', }}
            >
              <Text style={{
                color: 'white',
                marginTop: 10,
                marginLeft: 20,
                fontWeight: '600',
                fontSize: 18,
              }}
              >Close
              </Text>
            </TouchableHighlight>

closeButtonTapped() {
this.props.changeModalVisibility //"**'changeModalVisibility' is missing in props validation**"
}

Answer 1

父级组件中的子级组件具有changeModalVisibility属性。
你应该打电话
this.props.changeModalVisibility(true) or this.props.changeModalVisibility(false)
子组件内部。要从prop执行功能时，请确保使用箭头功能：

changeModalVisibility={this.changeModalVisibility}

changeModalVisibility = (visible) => {
 this.setState({ isModalVisible: visible });
}

在子组件中，onPress道具应如下所示：

onPress={() => this.closeButtonTapped()}

Answer 2

好吧，您不能更改父状态。您应该做的是发送一个在父级运行的回调函数，它将完成这项工作。并通过状态处理父组件中模态的可见性，并将其作为道具传递给孩子。以下是一个示例：这是我的父组件：

state = {
visibility:false}
 functionThatChangeState(){
        this.setState({forceUpdateVisible:false})

    }
<Childcomponent functionThatChangeState={this.functionThatChangeState.bind(this)} 
modalVisible={this.state.visiblity}/>

现在在子组件中，您将具有以下模态：

                   <Modal animationType="fade"
                    transparent
                    visible={this.props.modalVisible}>

，并在子对象内写一个关闭按钮：

  <Button  onPress={() => { this.props.functionThatChangeState() }}>

React-Native如何从子组件更新父状态变量

2 个答案: