React Datepicker（无法获取输入值）

Question

我是新来的反应。我需要使用 react-datepicker

当我更改日期时，我想获得输入的价值。如果我点击 2017 年 10 月 20 日，我想将 2017 年 10 月 20 日放在我的变量中。但我应该使用组件而不是输入的主要问题。

在我刚刚从状态中获取价值之前。像this.state.value。但现在它是状态中的对象（时刻）。而且这个对象没有值字段。

有我的代码：

 export default class DatePicker extends Component {
constructor (props) {
    super(props);
    // this.props.date should looks like "29 November 2017 00:00"
    // second argument for moment() it is format of date, because RFC 2822 date time format
    this.state = {
        date: moment(this.props.value, 'LLL')
    };
}
handleChange = (date) => {
  // const valueOfInput = this.state.date  <--- I want string with date here
  console.log('this.state.date',this.state.date);
  this.setState({date: date});
};
render() {
    return <Form.Field>
              <Label>
                <Picker
                  selected={this.state.date}
                  onChange={this.handleChange}
                  dateFormat="LLL"
                  locale={this.props.language}
                />
              </Label>
          </Form.Field>

原文由 SergeyB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需使用这个：

 handleChange = date => {
  const valueOfInput = date.format();
  ///...
};

因为这个 datepicker 返回一个 moment.js 对象！

有关更多信息，请在 此处查看 moment.js 文档。

原文由 Ihor Skliar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试这个

<DatePicker
   onChange={(value, e) => this.handleChange(value, e)}
   selected={this.state.inputValue} otherProps={here}
/>

// you can access the value field in handleChange by e.target.value

handleChange(value, e) {
    console.log(value); // this will be a moment date object
    console.log(e.target.value); // this will be a string value in datepicker input field
}

原文由 Karthik 发布，翻译遵循 CC BY-SA 4.0 许可协议