Question

我正在研究日期选择器的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} />
    );
  }
}

Answer 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>
    );
  }
}

点击输入中的任意位置后可以打开日历窗口小部件吗？

1 个答案: