React中点击清除按钮无法清除Datepicker值：value属性失效问题

核心原因：用value属性绑定的TextField是受控组件，它的值完全由你传入的state控制，直接通过清除按钮操作DOM或组件内部状态没用，必须更新对应的state才能让值清空。而defaultValue是非受控组件，组件自己管理内部状态，所以能直接清除。

正确实现步骤： #

• 用React状态（比如useState）管理日期选择器的值
• 清除按钮点击时，将状态设置为空字符串''或者null
• 确保TextField的value绑定状态，onChange事件同步更新状态

完整示例代码： #

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const DatePickerDemo = () => {
  // 用state管理日期值
  const [selectedDate, setSelectedDate] = useState('2024-05-20');

  // 清除日期的方法
  const handleClear = () => {
    setSelectedDate(''); // 将state设为空，触发组件重新渲染，清空输入框
  };

  // 日期变化时更新state
  const handleDateChange = (e) => {
    setSelectedDate(e.target.value);
  };

  return (
    <div>
      <TextField
        label="选择日期"
        type="date"
        value={selectedDate}
        onChange={handleDateChange}
        InputLabelProps={{
          shrink: true,
        }}
      />
      <Button variant="contained" color="secondary" onClick={handleClear} style={{ marginLeft: 16 }}>
        清除
      </Button>
    </div>
  );
};

export default DatePickerDemo;

注意点： #

• 如果用的是Material-UI的DatePicker组件（不是单纯的TextField），逻辑完全一致，只要把绑定的state清空即可
• 不要尝试直接修改DOM元素的value，受控组件的渲染完全依赖state，DOM修改会被React的重新渲染覆盖

内容的提问来源于stack exchange，提问作者Vimal Swaroop J