时间戳

首页 > 解决方案 > 如何使用 useState REACT-JS 修复 DatePicker 中的显示日期

reactjs - 如何使用 useState REACT-JS 修复 DatePicker 中的显示日期

问题描述

我有 DatePicker，我想将所选日期的值设置为 state

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有日期但输入框中没有显示

标签： reactjsreact-select

解决方案

问题是您有一个内存引用。ceo_birthday不改变。尝试为您的日期创建一个基本状态。

const [date, setDate] = useState(null)

推荐阅读