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
类中的状态访问它呢?