我是 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>
)
}
最佳答案
在这里,您的代码可以正常工作,只需要通过“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;
关于javascript - rc calendar 当我在日历中选择日期时它在文本框中没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53675126/