如何在移动设备上禁用键盘：React日期时间选择器。

Question

我正在为我的Reactjs应用程序使用React-date-picker。当我在移动设备上测试日期选择器选项时，键盘也会出现。我尝试了一些方法，但它没有解决我的问题。

<DatePicker  onChange={this.bidHandleChangeStart} 
value={this.state.startDate} name="startDate" maxDate={new Date()}  customInput={<CustomInput />} />

const CustomInput = React.forwardRef((props,ref) => {
    return (
        <input
            readOnly={true}
        />
    )
})

- Yasiru Attanayake

Answer 1

您可以使用keyboard模块解决该问题。 示例

import {Keyboard} from 'react-native';
...
  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
  }

  _keyboardDidShow() {
    alert('Keyboard Shown');
    Keyboard.dismiss()
  }

- hong developer

---

这是一个ReactJs应用程序，而不是React Native应用程序。我想在移动Web浏览器上隐藏键盘，所以我不能从react-native导入，对吧？ - Yasiru Attanayake

@YasiruAttanayake 你为什么将React-native添加为技术？你是在开发React吗？ - hong developer

是的，这是一个ReactJs应用程序。 - Yasiru Attanayake

Answer 2

尝试在接收焦点时强制模糊。我不了解React，但类似于以下内容：-

onFocus={this.blur()}

- Minty

Answer 3

我以前也遇到过同样的问题，是@Oleg帮我解决的。

这里有一个例子，我认为对你有帮助。

import { Keyboard } from 'react-native';

...
<Input caretHidden onFocus={(e) => Keyboard.dismiss()} />
...

- syjsdev