时间戳

首页 > 解决方案 > 在 React 中更改日期

reactjs - 在 React 中更改日期

问题描述

我正在学习 React，目前正在处理 Material-UI Date Picker，但我无法更改日历中的日期。

我正在使用的当前状态

  const [state, setState] = React.useState({ ...newTripStateData })

我在该对象（newTripStateData）中有所有状态数据，但是当我尝试使用以下函数访问和更改等于（新日期）的离开日期时；它没有改变。我究竟做错了什么？

const handleDateChange = (date) => {
    state.departureDate = date;
    setState(state.departureDate)

  }

日期选择器

<MuiPickersUtilsProvider  utils={DateFnsUtils}>
              <KeyboardDatePicker
                className={styles.inputs}
                disableToolbar
                inputVariant="outlined"
                format="MM-dd-yyyy"
                error={state.departureDateErrorStatus}
                margin="normal"
                id="date-picker-inline-1"
                label="Departure Date"
                selected={state.departureDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change date'
                }}
              />
              <FormHelperText
              error={state.departureDateErrorStatus}
              className={styles.helper_text_error}
              >
                {state.departureDateError}
              </FormHelperText>
            </MuiPickersUtilsProvider>

Chrome 开发工具中的 Material UI 错误

Material-UI: a component is changing the controlled value state of SelectInput to be uncontrolled.

提前致谢。

标签： reactjsmaterial-ui

解决方案

你不能改变state喜欢state.departureDate = date。你必须用setState它来改变它。

你可以直接这样做：

const handleDateChange = (date) => {
    setState({
      ...state,
      departureDate: date
    })
}

推荐阅读