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;

rc日历，当我在日历中选择日期时，文本框中的日期不变

1 个答案: