Блог

Главная - Вопросы по программированию - Как исправить отображение даты в DatePicker с помощью useState REACT-JS

Как исправить отображение даты в DatePicker с помощью useState REACT-JS

#reactjs #react-select

Вопрос:

У меня есть выбор даты, и я хочу установить значение выбранной даты в состояние

 import DatePicker from "react-modern-calendar-datepicker";

const [currentApp, setCurrentApp] = useState({
    ceo_birthday: null,
})

это и есть renderCustomInputDateOfBirth метод

 const renderCustomInputDateOfBirth = ({ ref }) => (
<input
  readOnly
  value={ currentApp.ceo_birthday }
  onChange={(e) => setCurrentApp({...currentApp, ['ceo_birthday'] : e })}
  style={{
    textAlign: "center",
    padding: "10px 10px",
    fontSize: "1rem",
    border: "1px solid #dadada",
    borderRadius: "100px",
    color: "#616161",
    outline: "none",
    backgroundColor: "#f5f5f5",
  }}
  className="my-custom-input-class" // a styling class
/>

);

это DatePicker 

 <DatePicker
    open={isOpen}
    value={currentApp.ceo_birthday}
    renderInput={renderCustomInputDay}
    calendarPopperPosition="bottom"
    onChange={
        (e) => setCurrentApp({
            ...currentApp, 
            ['ceo_birthday'] : e  })} 
    shouldHighlightWeekends
/>

проблема в том, что когда я выбираю дату, currentApp.ceo_birthday в поле ввода отображается дата, но ничего не отображается

Ответ №1:

Проблема в том, что у вас есть одна ссылка на память. ceo_birthday не меняется. Попробуйте создать базовое состояние для вашей даты.

const [date, setDate] = useState(null)

Метки: