0

当用户单击一个< input >元素时，我会显示一个模式，供用户选择一个 DateTime。然后，所选值显示为< input >元素的值。这工作正常。

第一个问题： 但是，之后，< input >元素中会显示一个光标。情况不妙。如果用户输入任何内容，它会被覆盖，因为它会获取已由 DateTime Picker 设置的状态值。此元素不应手动编辑。它应该只接受来自 DateTime 选择器的值。

第二个问题： 如果用户再次点击< input >元素，模式不会再次显示。情况不妙。我希望用户能够选择不同的值。

如何解决以上 2 个问题？

import { Input } from 'react-native-elements';
import DateTimePicker from "react-native-modal-datetime-picker";
.... 
state = {
    isDateTimePickerVisible: false,
};
..... 
<Input
    label='From'
    placeholder='01/01/2019 09:00 AM'
    onFocus={() => this.setState({ isDateTimePickerVisible: true })}
    value={dateTimeValue}
/>
<DateTimePicker
   isVisible={this.state.isDateTimePickerVisible}
   onConfirm={this.handleDatePicked}
   onCancel={this.hideDateTimePicker}
/>
.... 
handleDatePicked = (dateTime) => {
    this.hideDateTimePicker();
    this.setState({ shiftFromDateTime: dateTime });
};

hideDateTimePicker = () => {
  this.setState({ isDateTimePickerVisible: false });
};
4

2 回答 2

2

对于用户写你可以放editable={false}. 这也将阻止您的onFocus事件，要解决它，您需要在 周围使用 touchableOpacity <Input>，它与 onFocus 执行相同的操作，因此它将是：

<TouchableOpacity onPress={()=>this.setState({ isDateTimePickerVisible: true })}>
   <Input
   label='From'
   placeholder='01/01/2019 09:00 AM'
   editable={false}
   value={dateTimeValue}
   />
</TouchableOpacity>

这也应该解决第二个问题。

让我知道它是否有效！

于 2019-07-22T08:43:52.467 回答
0

在我发布的应用程序中，我从未遇到过此类问题，我使用https://github.com/xgfe/react-native-datepicker

  • 无需使用外部Input组件，因为该DatePicker组件还具有不可手动编辑的输入
  • 无需使用状态来知道模态是打开还是关闭
  • 编辑日期超过 1 次没有问题
  • 它使用更特定于平台的方法（在 android 上打开模式和在 ios 上打开 datepicker 操作表）
于 2019-07-22T08:56:02.117 回答