reactjs - RangePicker Ant 设计的重置值

Question

我在我的应用程序中使用来自 ant design 的 RangePicker。我遇到了以下问题：何时单击“重置”按钮我无法清除 RangePicker 组件中的值。请帮我怎么做？我试过分配 defaultValue 但它不起作用。

标签： reactjsantd

Answer 1

请改用 RangePicker 的 value 参数。像这样的东西应该可以工作。无法制作环境并对其进行测试，但希望您能理解。如果有不清楚的地方，请提出任何问题。

const SomeComponent = props => {
const [fromDate, setFromDate] = useState('2000-01-01');
const [toDate, setToDate] = useState('2000-01-02');

const onChangeDateRange = (dates, datesString) => {
 setFromDate(datesString[0]);
 setFromDate(datesString[1]);
//More code
}
const onResetClick = () => {
 setFromDate('2000-01-01');
setToDate('2000-01-02');
}

return (
<>
 <RangePicker
      onChange={onChangeDateRange}
      value={[moment(fromDate, dateFormat), moment(toDate, dateFormat)]}
    />
<Button onClick={onResetClick}>Reset</Button
</>
)
}

ant design 的文档非常好，最后您可以找到组件可以具有的所有可用参数。DatePicker 例如有一个allowClear。https://ant.design/components/date-picker/