回答如何更改状态更改中的div文本

Question

我试图在startDate和endDate获取新值但div显示旧值时更新div标签中的文本。如何使用状态更改来更新div中的文本

import moment from 'moment';
import DatetimeRangePicker from 'react-bootstrap-datetimerangepicker';
class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
 startDate: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm'),
endDate: moment().format('YYYY-MM-DD HH:mm'),
};
}

handleChange(event, payload) {
this.setState({
startDate: payload.startDate.format('YYYY-MM-DD HH:mm'),
endDate: payload.endDate.format('YYYY-MM-DD HH:mm')
});
this.onChange();
this.props.sendDateRanges(payload);
}

onChange() {
return `${this.state.startDate} - ${this.state.endDate}`;
});
}
render() {
return (<div>
<DatetimeRangePicker
timePicker
showDropdowns
onShow={this.handleChange.bind(this)}
onApply={this.handleChange.bind(this)}
>
</DatetimeRangePicker>
<div>{onChange()}</div> </div>);
}
export default connect(mapStateToProps, actions)(TestPage);

Answer 1

删除onChange功能并改为执行此操作......

render() {
const dateDiff = `${this.state.startDate} - ${this.state.endDate}`;
return (<div>
<DatetimeRangePicker
timePicker
showDropdowns
onShow={this.handleChange.bind(this)}
onApply={this.handleChange.bind(this)}
>
</DatetimeRangePicker>
<div>{dateDiff}</div> </div>);