reactjs - 选择 KeyboardDateTimePicker 时无法读取未定义的属性“值”

Question

我正在使用键盘日期时间选择器，这是我试图选择开始和结束日期的代码：

转变

const handleChange = (field, e, value) => {
let val = null
switch (field) {
   case "timeStart":
     val = DateUtil.toString(DateUtil.toUtc(new Date(e.target.value)))
     console.log("timeStart", e.target.value, val, DateUtil.toString(DateUtil.fromUtc(new Date(val))))
     setState({...state, timeStart: val})
     setErrorz({...errorz, timeStart: requiredValidation("Start Date", val)})
     break;           
        }

我就是这样称呼他们的

 <FormControl fullWidth error={errorz.timeStart !== ""} className={classes.formControl}>
       <KeyboardDateTimePicker
       id="timeStart"
       value={DateUtil.toString(DateUtil.fromUtc(new Date(state.timeStart)))}
       onChange={(e) => handleChange('timeStart', e)}
       inputVariant="outlined"
       format={DateUtil.FORMAT}
       label={t('event.startdate')}
       error={errorz.timeStart !== ""}
       onError={console.log}
       InputLabelProps={{
       shrink: true
       }} />

但是在我尝试选择开始或结束日期后，我收到一个错误Cannot read property "value" of undefined。如果我删除e.target.value我选择的日期将完全返回到其他日期，如果我选择 10 月 5 日，它会返回 4 月 17 日。

标签： reactjs

Answer 1

在 React 中，合成事件被池化，通常很快就会被取消并返回到池中以供重用。由于控制台日志不是完全同步的，您应该在回调中使用之前保存事件值。

const { value } = e.target; // <-- save event value

...

switch (field) {
  case "timeStart":
    val = DateUtil.toString(DateUtil.toUtc(new Date(value))); // <-- use saved value
    console.log(
      "timeStart",
      value, // <-- use saved value
      val,
      DateUtil.toString(DateUtil.fromUtc(new Date(val))),
    );
    setState({ ...state, timeStart: val });
    setErrorz({ ...errorz, timeStart: requiredValidation("Start Date", val) });
    break;           
}