reactjs - React Datepicker(无法获取输入值)

标签 reactjs datepicker react-redux

我是 react 新手。我需要使用react-datepicker

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

在我刚刚从状态中获取值(value)之前。就像 this.state.value 一样。但现在它是处于状态的对象(Moment)。并且该对象没有值字段。

这是我的代码:

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>

enter image description here

最佳答案

只需使用这个:

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

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

有关更多信息,请查看 moment.js docs here .

关于reactjs - React Datepicker(无法获取输入值),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47159933/

相关文章:

javascript - JQueryUI DatePicker 用 minDate 替换无效输入

javascript - 区域缺失错误 - AWS Amplify React

jquery - Jquery UI 日期选择器中的时区设置

javascript - 如何发送像表单数据 postman 这样的值 - React js

javascript - 从日期选择器中检索值

reactjs - React Redux - 为什么在构造函数之前调用 mapStateToProps?

javascript - 如何在映射时跳过 null? JSX

javascript - react 组件已连接,redux 状态发生变化......但组件没有更新?

javascript - 在react中导入json文件,webpack配置错误

node.js - 使用 Create React App 和 Plotly.js 时出现内存不足错误