单击输入中的任意位置后可以打开日历小部件吗？答案

【问题标题】：Possible to open calendar widget after clicking anywhere in input?单击输入中的任意位置后可以打开日历小部件吗？
【发布时间】：2017-11-16 18:10:08
【问题描述】：

我正在为日期选择器开发 React 组件。具体来说，每当有人单击输入内的任何位置时，我都会尝试在 HTML5 日期输入中打开日历小部件，而不仅仅是在箭头图标上。我当前的代码如下，但由于某种原因，除非我单击箭头，否则日历不会打开。我也试过发送 F4 键盘事件无济于事。

class DateInput extends React.Component {
  private input;

  onClick = e => {
    if (this.input) {
      this.input.focus();
    }
  }

  render() {
     const { value, onChange } = this.props;

     return (
      <input
        ref={input => (this.input = input)}
        type='date'
        value={value}
        onChange={onChange}
        onClick={this.onClick} />
    );
  }
}

【问题讨论】：

标签： html reactjs input datepicker

【解决方案1】：

我建议您在此输入上放置一个 <View> 组件，并在其上放置 onClick 事件，如下面的代码：

class DateInput extends React.Component {
  private input;

  onClick = e => {
    if (this.input) {
      this.input.focus();
    }
  }

  render() {
     const { value, onChange } = this.props;

     return (
      <View onClick={this.onClick = this.onClick.bind(this)}>
      <input
        ref={input => (this.input = input)}
        type='date'
        value={value}
        onChange={onChange}
        onClick={this.onClick} />
      </View>
    );
  }
}

【讨论】：