Javascript 关于react native DatePickerIOS与modal组合的问题

在我的应用程序中，我试图实现一个分段控制IOS，让用户从“5分钟后”、“15分钟后”、“30分钟后”和“自定义时间”中进行选择。 因此，当用户从'Xmin from now'中选择时，

this.state

中的'time'变量应设置为X min from now，如果用户选择'custom time'，则应显示带有计时器和确认按钮的模式，当用户选择时间并按下按钮时，

this.state.time

应设置为相应的时间

问题是：

我想从

this.state.date

设置

this.state.time

，它由模式中的时间选择器修改。但是当我从时间选择器中更改时间时，

这个.state.date在我再次更改选择器中的时间后被修改。例如，如果我将时间从11:05更改为11:10，并执行
console.log（this.state.date）
，则控制台日志显示11:05

当我想通过

this.setState

（time:this.state.date）来节省时间时，它会显示未定义的错误求值（

this.state.date

）

最后，如何在react native中将时间设置为5分钟

这就是我走了多远

构造函数和一些函数

export class RequestScene extends Component {
  constructor() {
    super();

    this.state={
      time: '',
      date: new Date(),
      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
      modalVisible: false,
    };
  }

// function for SegmentedControlIOS (show timepicker when 'Custom' is chosen)
_onTimeChange = (event) => {
  if (event.nativeEvent.selectedSegmentIndex == 3) {
    this.setModalVisible(true);
  } else {
    // Q: how can I set time to '5 min from now' in react-native?
  }
}

// turn modal on and off
setModalVisible(visible) {
  this.setState({modalVisible: visible});
}

// function for timepicker time change
onDateChange = (date) => {
  this.setState({date: date});
  console.log(this.state.date);
  // Q: this one works, but lags one move.
  // ie) if I change time from 11:05 to 11:10 from the picker, the console prints Wed Oct 05 2016 11:05:27 GMT+0800 (CST), then if I change time to 11:20 then the console prints 11:10, and so on.
}

// when the confirm button is pressed
confirmTime() {
  // Q: I want to save the date into this.state.time and close the modal.
  this.setState({time: this.state.date.toLocaleTimeString()});
  this.setModalVisible(false);
  // But when the confirm button is pressed, simulator show red screen saying 'undefined is not an object (evaluating 'this.state.date')
}

下面是显示模式的渲染函数部分。 在按下“确认时间”按钮之前，一切正常。 我不确定为什么会在控制台中打印this.state.date，但在尝试将其保存到this.state.time时，仍然显示未定义的错误

render() {
  return(
    // ...

    <View style={{height: 80, width: 360, padding: 10}}>
            <Text style={{fontSize: 14}}> Set Time: </Text>
            <SegmentedControlIOS
                values={['5min','15min','30min','custom']}
                selectedIndex={0}
                onChange={this._onTimeChange}
                tintColor='red'
            />
        </View>
        <View>
            <Modal
                animationType={"slide"}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {alert("Modal has been closed.")}}
            >
                <View style={{
                    flex: 1,
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <View style={{
                        height: 300,
                        width: 360,
                        backgroundColor: 'white'
                    }}>
                        <DatePickerIOS
                            date = {this.state.date}
                            mode = "time"
                            minuteInterval={10}
                            onDateChange={this.onDateChange}
                            timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
                        />

                        <Button
                            containerStyle = {{
                                backgroundColor: 'red',
                                width: 100,
                                height: 30,
                                padding: 5,
                                borderRadius: 3,
                            }}
                            style={{fontSize: 16, color: 'white'}}
                            onPress={this.confirmTime}
                        >
                            Confirm Time
                        </Button>
                    </View>
                </View>
            </Modal>
        </View>
    // ...
  )
}

render（）{
返回(
// ...
设定时间：
{警报（“模式已关闭。”）}
>
确认时间
// ...
)
}