在其他组件上存储组件状态

Question

我有一个我正在使用react-native-calendar-picker的React Native应用程序。现在，在某个特定日期，我想使用native base中不同的组件（例如选择器）来存储不同的数据。这是我的组件的外观：

我想根据日期的用户选择存储早餐，午餐和晚餐的不同值。但是我该怎么办呢？这是该组件的代码：

export default class CalendarScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedStartDate: null,
      selectedEndDate: null,
      orderStatusBreakfast: true,
      orderStatusLunch: true,
      orderStatusDinner: true
    };
    this.onDateChange = this.onDateChange.bind(this);
  }
 
  onDateChange(date, type) {
    if (type === 'END_DATE') {
      this.setState({
        selectedEndDate: date,
      });
    } else {
      this.setState({
        selectedStartDate: date,
        selectedEndDate: null,
      });
    }
    if (this.state.orderStatusBreakfast === false){
      console.log('No breakfast')
    }
    console.log('Yes breakfast')
  }
  toggleDrawer = () => {
    this.props.navigation.toggleDrawer()
  }
  
  handleOrder = () => {
    let startDateValue = this.state.selectedStartDate
    let endDateValue = this.state.selectedEndDate
  }

  render() {
    const { selectedStartDate, selectedEndDate } = this.state;
    const minDate = new Date();
    var date = new Date();
    const maxDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
    const startDate  =  selectedStartDate ? selectedStartDate.toString() : '';
    const endDate = selectedEndDate ? selectedEndDate.toString() : '';
    return (
      <ScrollView>
      <View style={styles.container}>
      <CalendarPicker
          startFromMonday={true}
          allowRangeSelection={true}
          minDate={minDate}
          maxDate={maxDate}
          todayBackgroundColor="#ed24a7"
          selectedDayColor="#7300e6"
          selectedDayTextColor="#FFFFFF"
          onDateChange={this.onDateChange}
        />
        <View>
        <ListItem onPress={()=>this.setState({orderStatusBreakfast: !this.state.orderStatusBreakfast})}>
            <Left>
              <Text style={styles.textMeal}>Breafkfast</Text>
            </Left>
            <Right>
              <Radio 
              color={"#000"}
              selectedColor={"#ed24a7"}
              selected={this.state.orderStatusBreakfast} />
            </Right>
          </ListItem>
          <ListItem onPress={()=>this.setState({orderStatusLunch: !this.state.orderStatusLunch})}>
            <Left>
              <Text style={styles.textMeal}>Lunch</Text>
            </Left>
            <Right>
              <Radio 
              color={"#000"}
              selectedColor={"#ed24a7"}
              selected={this.state.orderStatusLunch} />
            </Right>
          </ListItem>
          <ListItem onPress={()=>this.setState({orderStatusDinner: !this.state.orderStatusDinner})}>
            <Left>
              <Text style={styles.textMeal}>Dinner</Text>
            </Left>
            <Right>
              <Radio color={"#000"}
              selectedColor={"#ed24a7"}
              selected={this.state.orderStatusDinner} />
            </Right>
          </ListItem>
        </View>
        <View style={{marginVertical: 40, marginHorizontal: 20}}>
          <Button full danger onPress={this.handleOrder}>
            <Text}>Confirm</Text>
          </Button>
        </View>
      </View>
      </ScrollView>
    );
  }
}
 
});

因此，我可以据此更新在何处存储早餐，午餐和晚餐的价值。