javascript - rc calendar 当我在日历中选择日期时它在文本框中没有改变

Question

我是 rc 日历的新手。

我能够显示 rc-calendar，但是当我在日历中选择日期时，它在文本框中没有改变。

所以我调试并研究了他们文档中的各种方法。但不确定使用哪种方法。

你能告诉我如何修复它，以便将来我自己修复它。

我认为问题是由于这一行输入 value={moment(value).format('M/D/YY')}/>

https://stackblitz.com/edit/react-b2d3rb?file=demo.js

 render() {
        const calendar = (<Calendar/>);
        return (
            <div>
                <DatePicker
                    animation="slide-up"
                    value={moment()}
                    disabled={false}
                    calendar={calendar}
                >{
                    ({value}) => {
                        return (
                           // <input value={value}/>
                            <input value={moment(value).format('M/D/YY')}/>
                        )
                    }
                }</DatePicker>
            </div>
        )
    }

Answer 1

在这里，您的代码可以正常工作，只需要通过“handleChange”方法设置状态并在“moment”方法中传递参数:

import React, {Component} from 'react';
import Calendar from 'rc-calendar';
import DatePicker from 'rc-calendar/lib/Picker';
import 'rc-calendar/assets/index.css';
import moment from 'moment';

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(date) {
  console.log(date);
  this.setState({
    date: date,
  });
}

render() {
    const calendar = (<Calendar/>);
    return (
        <div>
            <DatePicker
                animation="slide-up"
                value={moment(this.state.date)}
                disabled={false}
                calendar={calendar}
                onChange={this.handleChange}
            >{
                ({value}) => {
                    return (
                        <input value={moment(value).format('M/D/YY')}/>
                    )
                }
            }</DatePicker>
        </div>
    )
  }
}

export default CalendarPage;