React Native 不显示来自 TextInput 的 Datepicker

Posted 2023-03-14

【中文标题】React Native 不显示来自 TextInput 的 Datepicker

【英文标题】：React Native doesn't show Datepicker from TextInput

【发布时间】：2017-02-09 07:45:51

【问题描述】：

我想知道是否可以在按下 TextInput 时显示日期选择器模式。

我正在使用TouchableWithoutFeedback 和TextInput。如果我使用Text 效果很好，但是当我使用 TextInput 时，日期选择器模式不会出现。

我之所以使用 TextInput 是因为我想使用 underlineColorandroid 属性。

这是代码

showPicker = async (stateKey, options) => 
    try 
      const newState = ;
      const  action, year, month, day  = await DatePickerAndroid.open(options);
      if (action === DatePickerAndroid.dismissedAction) 
        newState[stateKey + 'Text'] = 'dismissed';
       else 
        const date = new Date(year, month, day);
        newState[stateKey + 'Text'] = date.toLocaleDateString();
        newState[stateKey + 'Date'] = date;
      
      this.setState(newState);
     catch ( code, message ) 
      console.warn(`Error in example '$stateKey': `, message);
    
  ;

<TouchableWithoutFeedback
            onPress=this.showPicker.bind(this, 'simple',  date: this.state.simpleDate )
          >
            <TextInput
              placeholder="Where the event held*"
              onFocus=() => this.onFocus()
              onFocus=() => this.onFocus()
              style= 
                height: 60, backgroundColor: this.state.backgroundColor, color: this.state.color 
              
              value=this.state.simpleText
            />
          </TouchableWithoutFeedback>

目标是每当我按下/点击TextInput时，它会弹出日期选择器模式，然后我可以从模式中选择日期。

【参考方案1】：

你只需要在TextInput的onFocusprops中调用showPicker函数。像这样：

<TextInput onFocus = this.showPicker.bind(this, 'simple',  date: this.state.simpleDate )>

如果我的想法不符合您的目标，请原谅我。

【讨论】：

嗨，谢谢，是的，它可以工作，但是.. 文本输入仍然是可编辑的，我尝试将可编辑设置为 false，但未触发 showPicker 功能。

您好，您可以尝试import DismissKeyboard from 'dismissKeyboard'; 并在onFocus props 中调用DismissKeyboard() 函数。