在滚动容器中使用React-dates的DateRangePicker

npm install react react-dom
npm install react-dates

import React from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class ScrollableContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null
    };
  }

  render() {
    return (
      <div style={{ overflowY: 'scroll', height: '400px' }}>
        <DateRangePicker
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
          focusedInput={this.state.focusedInput}
          onFocusChange={focusedInput => this.setState({ focusedInput })}
        />
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <h1>使用React-dates的DateRangePicker</h1>
      <ScrollableContainer />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));