Reactstrap函数式Modal组件：关闭/打开时重置字段方案

核心思路：监听Modal显示状态，打开时主动初始化表单数据 #

你的问题根源在于Modal关闭后组件并未卸载，state会保留之前的值。只要在Modal打开的瞬间，根据当前是添加还是编辑模式重新初始化表单state即可，完全不需要改成类组件。

具体实现步骤 #

1. 统一管理表单state：把所有输入字段（包括日期）放在一个state对象里，方便批量初始化和更新

const [formData, setFormData] = useState({
  title: '',
  deadline: null
});

2. 用useEffect监听Modal显示状态：假设你的Modal通过isOpen props控制显示，当isOpen变为true时，根据传入的props.item初始化数据：

import { useEffect } from 'react';

useEffect(() => {
  if (isOpen) {
    // 编辑模式：用传入的待办项数据填充表单
    if (props.item) {
      setFormData({
        title: props.item.title,
        deadline: props.item.deadline
      });
    } else {
      // 添加模式：重置表单为空
      setFormData({
        title: '',
        deadline: null
      });
    }
  }
}, [isOpen, props.item]); // 依赖项必须包含isOpen和props.item，确保状态变化时触发更新

3. 绑定输入组件的value和onChange：

• 普通Input组件：

<Input
  value={formData.title}
  onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
  placeholder="输入待办标题"
/>

• DateTimePicker组件（以reactstrap的DateTimePicker为例）：

<DateTimePicker
  value={formData.deadline}
  onChange={(deadline) => setFormData(prev => ({ ...prev, deadline }))}
  label="截止日期"
/>

关键注意点 #

• 不要移除value绑定：绑定value是受控组件的标准写法，DateTimePicker必须依赖value才能正确显示选中的日期，移除反而会导致数据不同步。
• 依赖项不能遗漏：useEffect的依赖数组里必须包含isOpen和props.item，否则当Modal打开状态切换、或者编辑的待办项变化时，不会触发初始化逻辑。

内容的提问来源于stack exchange，提问作者Nickolodeon