React-Suite DatePicker 的 UI 中的值并不清晰

Question

我正在设置值

onSelect

并在单击按钮时清除值。

DatePicker

字段的状态正在被清除，但从 UI 来看，该值并未被清除。它会一直保留在那里，直到并且除非我单击

DatePicker

字段中的十字图标。我还面临另一个问题，那就是每当我放置值属性

value={moment(searchData.createdDate).toDate()}

并且当我单击字段时，它都会抛出

Invalid time error

错误。请参阅以下代码和图片以获取更多说明。

import { DatePicker } from 'rsuite';
< DatePicker
oneTap
placeholder = "Date select"
name = "createdDate"
onSelect = {(date, event) => {
        handleInputChange({
            target: {
                name: "createdDate",
                value: moment(date).format('YYYY-MM-DD')
            }
        })
    }
}
    // value={moment(searchData.createdDate).toDate()}
    />

谢谢你。

Answer 1

我解决了这个问题。问题在于我直接设置的值。我在

new Date(searchData.createdDate)

内传递了值，它按预期工作。

import { DatePicker } from 'rsuite';
< DatePicker
oneTap
placeholder = "Date select"
name = "createdDate"
value={searchData.createdDate ? new Date(searchData.createdDate) : null}   // correction
onSelect = {(date, event) => {
        handleInputChange({
            target: {
                name: "createdDate",
                value: moment(date).format('YYYY-MM-DD')
            }
        })
    }
}
/>