Question

在我的应用中，我尝试实施一个SegmentedControlIOS，让用户可以选择从现在开始的5分钟，从现在开始的15分钟＆＃39;，＆＃39 ;从现在起30分钟＆＃39;以及＆＃39;自定义时间＆＃39; 因此，当用户从现在开始选择Xmin时，＆＃39;时间＆＃39; this.state中的变量应该从现在开始设置为X分钟，并且如果用户选择了“自定义时间”。然后应该显示带有时间选择器和确认按钮的模态，当用户选择时间并按下按钮时this.state.time应设置为相应的时间。

问题是：

我想设置来自this.state.time的{{1}}，this.state.date由模态中的timepicker修改。但是当我从timepicker更改时间时，{I}再次更改选择器中的时间后会修改this.state.date。例如，如果我将时间从11:05更改为11:10并执行console.log(this.state.date)，则控制台日志显示为11:05。
当我想将时间保存this.setState（时间：this.state.date）时，它会显示未定义的错误评估（this.state.date）。
最后，我怎样才能将反应原生的时间设定为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>
    // ...
  )
}

有关反应原生DatePickerIOS与模态

0 个答案: