为什么我的软件包在materail UI Modal reaactJs中不起作用

Question

我有一个模态，其中实现了react-number-field和antd-desgin日期选择器。

问题在于它们两个都不能在Material UI Modal中使用。

模式加载时，它会在字段中显示格式化的值，但是当我尝试更新它们时，它将使它们为空白。另外，对于文本字段，它们不基于数字输入进行输入。 对于datetimepicker，它显示无效的日期问题。

我使用的代码是：

import {DatePicker} from 'antd';
import 'antd/dist/antd.css';
import locale from "antd/es/date-picker/locale/de_DE";
import moment from "moment";
import NumberFormat from "react-number-format";

const dateFormat = 'DD.MM.YYYY';

<Dialog open={LeadPlanDialogOpen} maxWidth="sm">
                    <DialogTitle id="form-dialog-title" style={{textAlign: 'center'}}>Neve Akquise Planen</DialogTitle>
                    <DialogContent className="p-60">
                        <Grid container spacing={1} justify="center">
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                Jahr
                            </Grid>
                            <Grid item xs={10}>
                                {/*<TextField required fullWidth size="small" value={year}*/}
                                {/*           onChange={(e) => this.setState({year: e.target.value})}*/}
                                {/*           variant="outlined"/>*/}

                                <DatePicker
                                    locale={locale}
                                    fullWidth
                                    required
                                    size="small"
                                    value={moment(year, 'DD.MM.YYYY')}
                                    format={'DD.MM.YYYY'}
                                    placeholder="DD.MM.YYYY"
                                    allowClear={false}
                                    bordered={false}
                                    onChange={(e) => {
                                        let date = moment(e).format('DD.MM.YYYY');
                                        this.setState({year: date})
                                    }}
                                />
                                <span></span>

                                <DatePicker
                                    locale={locale}
                                    value={year === "" ? '' : moment(year, dateFormat)}
                                    format={dateFormat}
                                    placeholder="DD.MM.YYYY"
                                    allowClear={false}
                                    bordered={false}
                                    onChange={(e) => {
                                        this.setState({year: moment(e).format('DD.MM.YYYY')})
                                    }}
                                />
                                <span></span>
                            </Grid>
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                Probability
                            </Grid>
                            <Grid item xs={10}>
                                <NumberFormat
                                    customInput={TextField} required={true} fullWidth
                                    inputProps={{maxLength: 5}} size="small" variant="outlined"
                                    value={Number(probability)}
                                    thousandSeparator='.' decimalSeparator="," decimalScale="2" fixedDecimalScale={true}
                                    allowNegative={false} onChange={(e) => this.setState({probability: e.target.value})}
                                />
                            </Grid>
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                Plan II
                            </Grid>
                            <Grid item xs={10}>
                                <NumberFormat
                                    customInput={TextField} required={true} fullWidth
                                    inputProps={{maxLength: 5}} size="small" variant="outlined" value={Number(plan2)}
                                    thousandSeparator='.' decimalSeparator="," decimalScale="2" fixedDecimalScale={true}
                                    allowNegative={false} onChange={(e) => this.setState({plan2: e.target.value})}
                                />
                            </Grid>
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                Plan III
                            </Grid>
                            <Grid item xs={10}>
                                <NumberFormat
                                    customInput={TextField} required={true} fullWidth
                                    inputProps={{maxLength: 5}} size="small" variant="outlined" value={Number(plan3)}
                                    thousandSeparator='.' decimalSeparator="," decimalScale="2" fixedDecimalScale={true}
                                    allowNegative={false} onChange={(e) => this.setState({plan3: e.target.value})}
                                />
                            </Grid>
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                Honorar
                            </Grid>
                            <Grid item xs={10}>
                                <NumberFormat
                                    className="form-control2"
                                    customInput={TextField} required={true} fullWidth
                                    inputProps={{maxLength: 5}} size="small" variant="outlined" value={Number(fee)}
                                    thousandSeparator='.' decimalSeparator="," decimalScale="2" fixedDecimalScale={true}
                                    allowNegative={false} onChange={(e) => this.setState({fee: e.target.value})}
                                />
                            </Grid>
                            <Grid item xs={2} style={{lineHeight: '2.5'}}>
                                NK
                            </Grid>
                            <Grid item xs={10}>
                                <NumberFormat
                                    className="form-control3"
                                    customInput={TextField}
                                    required={true} fullWidth size="small"
                                    inputProps={{maxLength: 40}}
                                    variant="outlined"
                                    value={Number(addcosts)}
                                    thousandSeparator='.'
                                    decimalSeparator=","
                                    decimalScale='2'
                                    onChange={(e) => this.setState({addcosts: e.target.value})}
                                />
                            </Grid>
                        </Grid>
                    </DialogContent>
                    <DialogActions style={{justifyContent: 'center'}}>
                        <Button variant="outlined" className="m-10" onClick={this.addLeadPlanDialog}
                                color="primary">
                            Speichern
                        </Button>
                        <Button variant="outlined" className="m-10" onClick={this.abortLeadPlanDialog}
                                color="secondary">
                            Abbrechen
                        </Button>
                    </DialogActions>
                </Dialog>