在React Native中访问父类内部的子类常量

时间:2018-06-26 07:30:21

标签: javascript reactjs react-native

export class ContactDetailsAddToGroupScreen extends StoreComponent {
    constructor() {
        super();
        this.state = {
            contact: null,
            contactGroups: [],
            allGroups: [],
            groupStates: [],
        };
    }

    componentDidMount() {
        super.componentDidMount();

        this.store.setIsSearchVisible(true);
        this.store.search('');
        this.store.refreshContact();
        this.store.refreshGroups();
    }

    componentWillUnmount() {
        super.componentWillUnmount();
        this.store.clearSearch();
    }

    storeDidUpdate() {
        if (this.hasChanged(this.state.contact, this.store.contact)
            || this.hasChanged(this.state.allGroups, this.store.groups)
        ) {

            const contact = this.store.contact;
            const contactGroups = this.store.contact.groups;
            const allGroups = this.store.groups;
            const allGroups_names = allGroups.map(x => x.name);
            const contactGroups_names = contactGroups.map(x => x.groupName);
            const missingGroups = allGroups_names.filter(x => contactGroups_names.indexOf(x) < 0);
            const oldStates = this.state.groupStates;
            const groupStates = missingGroups.map(x => ({
                groupName: x,
                isSelected: oldStates.filter(o => o.groupName == x && o.isSelected).length,
            }))

            console.log('ContactDetailsAddToGroupScreen.storeDidUpdate', {
                contact, contactGroups, allGroups, allGroups_names, contactGroups_names, missingGroups, oldStates, groupStates
            });

            this.setState({
                contact,
                contactGroups,
                allGroups,
                groupStates
            });
        }
    }

    addGroups = () => {
        // TODO: What about removing contact from groups?
        const selectedGroupNames = this.state.groupStates.filter(x => x.isSelected).map(x => x.groupName);
        this.store.addContactToGroups(selectedGroupNames);
        this.store.goBack();
    };

    render() {
        let groupStates = this.state.groupStates;

        return (
            <ScrollView style={styles.view}>
                <Header title='Add to Group'
                    kindLeft='back' onPressLeft={this.store.goBack}
                    kindRight='add' onPressRight={this.addGroups}
                />
                <View style={styles.groupList}>
                <SearchableList
                    pullToRefresh=""
                    items={groupStates}
                    searchFields={groupStateSearchFields}
                    searchTemplate={() => <GroupStateSearchEntry />}
                    itemTemplate={x => <GroupStateItem key={x.groupName} groupState={x} />} />
                            </View>
                        </ScrollView>
                    );
                }
}

大家好。我有一堂课ContactDetailsAddToGroupScreen。它正在呈现一个列表,然后在该列表上单击,然后通过切换功能更新列表。我只想在列表中选择某项时显示kindRight='add'。该列表通过“切换”功能内的GroupStateItem呈现。谁能帮我?这是我的GroupStateItem班。

class GroupStateItem extends React.Component {

    toggle = () => {
        this.props.groupState.isSelected = !this.props.groupState.isSelected;
        this.setState({});
        console.log(this.props.groupState);
    };

    render() {
        const { groupState } = this.props;
        const { groupName, isSelected } = groupState;

        console.log('GroupStateItem.render', { groupState });

        return (
            <View style={[styles.groupItem, isSelected && styles.groupItem_selected]}>
                <TouchableOpacity onPress={this.toggle}>
                    <View style={styles.groupName}>
                        <Text style={styles.groupNameText}>{groupName}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

基本上我可以在GroupStateClass内部声明一个常量,但是如何通过ContactDetailsAddToGroupScreen类中的状态访问它呢?

0 个答案:

没有答案