javascript - 关闭从其他自定义模态导入的 React 模态

Question

首先，我定义这个组件以在模态窗口中重用

模板 1：

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.setState({
                visible: false
            });
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}

现在在第二个组件中，我称之为：

import Modal from './common/modal';
return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        />
    )

单击一个按钮，我 setState showModal ：true，我的模态已打开，我可以在模态外部单击，实际上模态消失了，但我的 state.showModal 仍然是：true，如何更新此视图中的状态？

Answer 1

在 React 中也调用this.setState({showModal: false})我们将这些称为组件而不是“模板”

Answer 2

您可以通过回调传递onModalHide给react-native-modal.

在您的 CustomModal 中： <Modal onModalHide={this.props.onModalHide} ... />

在您的“第二个模板”中

<Modal onModalHide={() => this.setState({ showModal: false })} ... />.

另请注意，无需跟踪您CustomModal的state中的可见性，因为它已经在 a 中具有可见性prop。只需将道具直接传递到内部Modal：<Modal isVisible={this.props.isVisible} .../>

Answer 3

hideModal在您调用的类中创建一个函数，<Modal />如下所示：

hideModal = () => {
    this.setState({showModal: false})
}

并将其<Modal />作为道具传递给如下：

    import Modal from './common/modal';
    return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        hideModal={this.hideModal}
        />
    )

并且对于关闭调用hideModal上面从您的组件传递的道具，CustomModal如下所示：

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.props.hideModal()
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}