React Js - 清除 Material UI Datepicker答案

【问题标题】：React Js - clear Material UI DatepickerReact Js - 清除 Material UI Datepicker
【发布时间】：2016-07-05 04:54:30
【问题描述】：

我在使用Material UI 的Datepicker 时遇到了一些问题，我正在寻找一种方法来reset 它的领域，但我没有找到办法。我也咨询过this 问题。有人可以帮帮我吗？

【问题讨论】：

我不确定材料设计的 DatePicker 是否需要重置

标签： reactjs datepicker material-ui reset

【解决方案1】：

在 Material ui 4.0.0 以上版本中，您必须设置空字符串来重置日期选择器。

    value={person.birthday ?? ''}

【讨论】：

【解决方案2】：

我发现了同样的问题，研究并找到了解决方案，

我们可以使用InputAdornments 在其中设置一个关闭按钮。

请记住，我们必须使用event.stopPropagation() 来停止单击关闭按钮时弹出的DatePicker。

你可以看看这里，https://codesandbox.io/s/material-ui-pickers-usage-demo-forked-tptz3?file=/src/App.jsx 或 https://tptz3.csb.app/

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";

import ClearIcon from "@material-ui/icons/Clear";
import { IconButton } from "@material-ui/core";

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  function handleClr(e) {
    e.stopPropagation();
    handleDateChange(null);
  }
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        autoOk
        variant="inline"
        format="dd/MM/yyyy"
        value={selectedDate}
        onChange={handleDateChange}
        InputProps={{
          endAdornment: (
            <IconButton onClick={(e) => handleClr(e)}>
              <ClearIcon />
            </IconButton>
          )
        }}
      />
    </MuiPickersUtilsProvider>
  );
}

export default App;

【讨论】：

【解决方案3】：

null 清除日期选择器，例如看看https://codesandbox.io/s/material-ui-pickers-clear-hhlvg

【讨论】：

【解决方案4】：

你可以将value属性设置为null，它会清除它。

【讨论】：