React模态框组件关闭时如何重置所有状态及输入为默认值

方案一：条件渲染（推荐，实现成本最低） #

原理是让模态框仅在需要展示时才挂载到DOM，关闭时直接卸载组件，下次打开重新挂载时所有useState会自动回到初始值，不需要修改模态框内部逻辑。
只需要修改父组件的渲染逻辑：

// 父组件中渲染SplitModal的位置修改为条件渲染，splitmodal为控制模态框显隐的布尔值
{splitmodal && <SplitModal 
  setsplitmodal={setsplitmodal}
  cost={cost}
  list={list}
  listobj={listobj}
  setlistobj={setlistobj}
  equal={equal}
  setEqual={setEqual}
  payer={payer}
  setPayer={setPayer}
  part={part}
  setPart={setPart}
  setM={setM}
/>}

方案二：模态框内部新增重置逻辑 #

如果不想每次卸载组件，可以在内部封装重置函数，关闭时主动调用重置所有状态：

1. 先统一定义初始状态常量

// 在SplitModal组件内部开头定义
const DEFAULT_INNER_STATE = {
  method: true,
  split: true,
  owe: true,
  owes: true,
  click: false,
  amount: undefined,
  total: 0
}
// 父组件传递的状态的默认值，可根据你的业务需求调整
const DEFAULT_PARENT_STATE = {
  equal: 'equally',
  payer: '',
  part: '',
  m: true
}

2. 新增重置函数

const resetModal = () => {
  // 重置组件内部state
  setMethod(DEFAULT_INNER_STATE.method)
  setsplit(DEFAULT_INNER_STATE.split)
  setowe(DEFAULT_INNER_STATE.owe)
  setowes(DEFAULT_INNER_STATE.owes)
  setClick(DEFAULT_INNER_STATE.click)
  setAmount(DEFAULT_INNER_STATE.amount)
  setTotal(DEFAULT_INNER_STATE.total)
  // 重置父组件传递的状态
  setEqual(DEFAULT_PARENT_STATE.equal)
  setPayer(DEFAULT_PARENT_STATE.payer)
  setPart(DEFAULT_PARENT_STATE.part)
  setM(DEFAULT_PARENT_STATE.m)
  // 重置分摊对象
  const resetListObj = {...listobj}
  Object.keys(resetListObj).forEach(key => resetListObj[key] = 0)
  setlistobj(resetListObj)
}

3. 修改关闭按钮的点击事件，触发重置

<button
  style={{ position: "absolute", right: "10px" }}
  onClick={() => {
    resetModal()
    setsplitmodal(false);
  }}
>
  <i className="fas fa-times" />
</button>

4. 优化输入框为受控组件，删除原来直接操作DOM的逻辑
   把拆分金额的输入框修改为绑定listobj的值，不需要用document.getElementById修改：

<input
  type="number"
  value={listobj[f] < 0 ? Math.abs(listobj[f]) : ''}
  style={{
    width: "60px",
    border: "1px solid #ccc",
    borderRadius: "0px 4px 4px 0px",
    height: "23.33px",
  }}
  className={amount === "err" ? "text-red-500" : null}
  onChange={(e) => {
    distriamount(e, i);
  }}
/>

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