代码之家  ›  专栏  ›  技术社区  ›  catandmouse

React日期选择器月/年选择在iOS Safari/Chrome上不起作用

  •  0
  • catandmouse  · 技术社区  · 5 年前

    我在用 react-day-picker 包以选择包含年/月道具的日期但是,“年/月”下拉列表在iOS移动浏览器上无法正常工作:

    import React from 'react';
    import ReactDOM from "react-dom";
    import DayPickerInput from 'react-day-picker/DayPickerInput';
    import 'react-day-picker/lib/style.css';
    
    const currentYear = new Date().getFullYear();
    const fromMonth = new Date(currentYear, 0);
    const toMonth = new Date(currentYear + 10, 11);
    
    function YearMonthForm({ date, localeUtils, onChange }) {
      const months = localeUtils.getMonths();
    
      const years = [];
      for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
        years.push(i);
      }
    
      const handleChange = function handleChange(e) {
        const { year, month } = e.target.form;
        onChange(new Date(year.value, month.value));
      };
    
      return (
        <form className="DayPicker-Caption">
          <select name="month" onChange={handleChange} value={date.getMonth()}>
            {months.map((month, i) => (
              <option key={month} value={i}>
                {month}
              </option>
            ))}
          </select>
          <select name="year" onChange={handleChange} value={date.getFullYear()}>
            {years.map(year => (
              <option key={year} value={year}>
                {year}
              </option>
            ))}
          </select>
        </form>
      );
    }
    
    export default class Example extends React.Component {
      constructor(props) {
        super(props);
        this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
        this.state = {
          month: fromMonth,
        };
      }
      handleYearMonthChange(month) {
        this.setState({ month });
      }
      render() {
        const dayPickerProps = {
          month: this.state.month,
          fromMonth: fromMonth,
          toMonth: toMonth,
          captionElement: ({ date, localeUtils }) => (
            <YearMonthForm
              date={date}
              localeUtils={localeUtils}
              onChange={this.handleYearMonthChange}
            />
          )
        };
    
        return (
          <div className="YearNavigation">
            <DayPickerInput
              showOverlay={true}
              dayPickerProps={dayPickerProps}
            />
          </div>
        );
      }
    }
    ReactDOM.render(<Example />, document.getElementById("root"));
    

    您可以在此链接上看到演示(必须在iOS设备上打开):

    https://codesandbox.io/s/0y84wrp8mn

    有办法解决这个问题吗?

    0 回复  |  直到 5 年前
        1
  •  3
  •   di3    5 年前

    问题是默认keepfocus设置为true。像在示例组件中那样更改呈现方法(keepfocus={false}):

    return (
      <div className="YearNavigation">
        <DayPickerInput
          showOverlay={true}
          keepFocus={false}
          dayPickerProps={dayPickerProps}
        />
      </div>
    );