Question

我有一个父类和一个子类，但是我不能从子类上调用父类的函数它仅用于关闭模态并从我的模态上的“排序”中发送一些数据。抱歉，我是RN上的新手

在OrderScreen上，我想将模态和屏幕分开，所以我在另一个文件JS上调用模态，然后在ModalSort.js上，我想回调该函数位于他的Parents或Order.screen.js

我尝试了很多方法，但是该模式仍然无法关闭，如果我放onBackdropPress = {（）=>（）}，则该模式可以关闭但没有响应

Order.screen.js（又称Parents.js）

class OrderScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        visibleModal: null,
    };
};
exit = () => this.setState({ visibleModal: false });

_applySort = () => {
    this.setState({ visibleModal: false });
    this.onRefresh();
};
pressSort = () => this.setState({ visibleModal: 4 });

render() {
    return (
        <View style={styles.containerTop}>
            <Modal isVisible={this.state.visibleModal === 5} style={styles.bottomModal}>
                {this._renderModal()}
            </Modal>
            <Modal isVisible={this.state.visibleModal === 4} 
            style={styles.bottomModal}  onBackdropPress={() => {this.toggleModal();}}>
                {this._renderModalSort()}
            </Modal>



            <Modal isVisible={this.state.visibleModal === 3} style={styles.bottomModal}>
                {this._renderModalFilter()}
            </Modal>
            <Modal isVisible={this.state.visibleModal === 2} style={styles.bottomModal}>
                {this._renderModalEmail()}
            </Modal>
            <NavigationEvents
                onWillFocus={this.willFocusAction} />
            <GeneralStatusBarColor backgroundColor="#FFF" barStyle="light-content" />
        </View>
    )
};

_renderModalSort = () => {
    return (
        <ModalSort 
            exit={() => {
                this.exit.bind(this);
            }}
        />
    )
};

const mapStateToProps = ({ authOrder }) => {
const { orderSummary, error, loading, loadingSummary, loadingEmail, typeOfLocation, openNext, openList, closedList, closedNext } = authOrder;
return { orderSummary, error, loading, loadingSummary, loadingEmail, typeOfLocation, openNext, openList, closedList, closedNext };
};

export default connect(mapStateToProps, { getOrderSummary, getOpenOrderList, getClosedOrderList, sendEmailCsvAllOrder, logoutSession })(OrderScreen);

ModalSort.js（又称Child.js）

class ModalSort extends Component {
constructor(props) {
    super(props);
    this.state = {
        visibleModal: null,
    }
};
sorter = (isi) => this.setState({ sorted: isi });

_applySort = () => {
    this.setState({ visibleModal: false });
    // this.onRefresh();
};

render() {
    return(
            <View style={styles.modalContentSort}>
                <View style={styles.modalCenter}>
                <View style={styles.headerModel}>
                    <View style={styles.headerBack}>
                        <TouchableOpacity onPress={()=>{this.props.exit()}}>
                            {/* <NavigationEvents onWillFocus={this.willFocusAction} /> */}
                            <Image style={styles.logoClose} source={require('../../assets/icons/iconClose.png')} />
                        </TouchableOpacity>
                    </View>
                    <View style={styles.headerSort}>
                        <Text style={styles.textFilter}>Sort by</Text>
                    </View>
                </View>
                <Text style={styles.textFilter}>SO Number</Text>
                <View style={styles.headerModel}>
                    <View style={styles.headerFilterItem}>
                        <TouchableOpacity onPress={() => this.sorter(1)}>
                            <Text style={this.state.sorted == 1 ? styles.headerBorderItemActive : styles.headerBorderItem}>
                                <Image style={styles.imageSort} source={require('../../assets/icons/iconNumberAscending.png')} />Ascending</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.headerFilterItem}>
                        <TouchableOpacity onPress={() => this.sorter(2)}>
                            <Text style={this.state.sorted == 2 ? styles.headerBorderItemActive : styles.headerBorderItem}>
                                <Image style={styles.imageSort} source={require('../../assets/icons/iconNumberDescending.png')} />Descending</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Text style={styles.textFilter}>PO Customer</Text>
                <View style={styles.headerModel}>
                    <View style={styles.headerFilterItem}>
                        <TouchableOpacity onPress={() => this.sorter(3)}>
                            <Text style={this.state.sorted == 3 ? styles.headerBorderItemActive : styles.headerBorderItem}>
                                <Image style={styles.imageSort} source={require('../../assets/icons/iconNumberAscending.png')} />Ascending</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.headerFilterItem}>
                        <TouchableOpacity onPress={() => this.sorter(4)}>
                            <Text style={this.state.sorted == 4 ? styles.headerBorderItemActive : styles.headerBorderItem}>
                                <Image style={styles.imageSort} source={require('../../assets/icons/iconNumberDescending.png')} />Descending</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Text style={styles.textFilter}>SO Date</Text>
                <View style={styles.headerModel}>
                    <TouchableOpacity onPress={() => this.sorter(6)}>
                        <View style={styles.headerFilterItem}>
                            <Text style={this.state.sorted == 6 ? styles.headerBorderItemActive : styles.headerBorderItem}>Newest</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.sorter(5)}>
                        <View style={styles.headerFilterItem}>
                            <Text style={this.state.sorted == 5 ? styles.headerBorderItemActive : styles.headerBorderItem}>Oldest</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <Text style={styles.textFilter}>ETA</Text>
                <View style={styles.headerModel}>
                    <TouchableOpacity onPress={() => this.sorter(8)}>
                        <View style={styles.headerFilterItem}>
                            <Text style={this.state.sorted == 8 ? styles.headerBorderItemActive : styles.headerBorderItem}>Newest</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.sorter(7)}>
                        <View style={styles.headerFilterItem}>
                            <Text style={this.state.sorted == 7 ? styles.headerBorderItemActive : styles.headerBorderItem}>Oldest</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <TouchableHighlight style={styles.buttonSort} onPress={this._applySort.bind(this)} >
                    <Text style={styles.textApply}>Apply</Text>
                </TouchableHighlight>
                </View>
            </View>
        )
};

}
export default ModalSort;

Answer 1

从Parent组件的Child组件中关闭模态：

您的Order.screen.js有一个错误，导致您的程序无法正常运行。使用this.exit.bind(this);时，它将返回一个回调，而不是一个函数。因此，当您在this.props.exit()中调用ModalSort.js时，它将调用实际上没有显示任何内容的exit。要解决此问题，您有2种方法：

Order.screen.js

_renderModalSort = () => {
    return (
        <ModalSort 
            exit={this.exit.bind(this)}
        />
    )
};

或

_renderModalSort = () => {
    return (
        <ModalSort 
            exit={() => {
                this.exit();
            }}
        />
    )
};

从排序模式中发送数据：

由于您正在使用Redux，因此建议您创建2个动作。第一步是将数据保存到状态树中。第二个是获取这些数据。如果您不擅长Redux，或者不想使用它，可以尝试以下步骤：
- 初始化变量以将数据保存在Parent中：

class OrderScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleModal: null,
        };
        this.data = null; // Your data goes here.
        /*
            You can store your data in state if you want to re-render when updating your data.
            this.state = {
                visibleModal: null,
                data: null
            }
        */
    }
}

创建一个将数据保存在Parent中的函数：

saveData(data) {
    this.data = data;
}

将该函数传递给Child：

_renderModalSort = () => {
    return (
        <ModalSort 
            exit={() => {
                this.exit();
            }}
            saveData={(data) => {
                this.saveData(data);
            }}
        />
    )
};

最后，您可以从Child调用它：

class ModalSort extends Component {
    sorting() {
        data = null; // Your data will be stored in this variable
        // You sorting function goes here
        this.props.saveData(data); // Save your data
    }
}

如果您要处理保存的数据，可以在saveData(data)中修改Parent函数。

希望这对您有帮助！

Answer 2

AppHelper.js

TypeError: __WEBPACK_IMPORTED_MODULE_3_react___default.a.memo is not a function. (In '__WEBPACK_IMPORTED_MODULE_3_react___default.a.memo(TouchRipple)', '__WEBPACK_IMPORTED_MODULE_3_react___default.a.memo' is undefined)
./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js
node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js:312
  309 | export default withStyles(styles, {
  310 |   flip: false,
  311 |   name: 'MuiTouchRipple'
> 312 | })(withMuiName(React.memo(TouchRipple)));
  313 |

Home.js

import React, { Component } from 'react';
import {
  Alert
} from 'react-native';

export default class AppHelper {
  static showAlert(title, message) {
    Alert.alert(title, message)
  }
}

在另一个文件JS React Native

2 个答案: