antd table 单元格编辑 触发 DatePicker（日期组件）使日期面板受控

项目场景：

需要对当前页面Table表格进行单元格编辑，使用antd + table + DatePicker + Input等
操作：const inputRef = useRef(null); 使用ref操作dome
inputRef.current.focus();

<Input ref={inputRef} onPressEnter={save} onBlur={save} />
<DatePicker ref={inputRef} format="YYYY-MM-DD" onBlur={save} />

操作场景：

点击单元格：
Input
输入框聚焦，可正常输入内容

DatePicker
(目的：增强用户交互)
1、日期选择框聚焦，一般不可正常输入内容，需要在日期控制面板进行日期选择
使用inputRef.current.focus();使日期控件获取焦点后，需要二次点击触发日期面板弹出（用户操作麻烦）

2、使用inputRef.current.focus();使日期控件获取焦点后，直接打开日期面板

方法：

1）：简单-使用DatePicker 的open属性 设置true(一直展开面板)，在选中日期时面板不关闭（失焦时直接控制是否编辑来关闭）官方使用save（）内toggleEdit()，使用onChang={()=>save()} 选中日期后触发，关闭编辑（简单但不美观，面板一直开启直接覆盖面板，无动画）

formeItem = (
   <DatePicker open ref={inputRef} format="YYYY-MM-DD" onBlur={save} onChange={save} />
        );

2）：美观-动态控制open

  const [open, setOpen] = useState(true);
  //选中后关闭
  <DatePicker open={open} ref={inputRef} format="YYYY-MM-DD" onBlur={save} onChange=		     {()=>setOpen(false)} />
  //失焦后 设置true
    const save = async () => {
    try {
      const values = await form.validateFields();
      
      // 失焦后 设置true
	  setOpen(true)
	  
      if (inputType === 'datePicker') {
        values[dataIndex] = values[dataIndex]
          ? moment(new Date(values[dataIndex]), 'YYYY-MM-DD').format('YYYY-MM-DD')
          : '';
      }

      if (typeof values[dataIndex] === 'string') {
        values[dataIndex] = values[dataIndex].trim();
      }
      
      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

选中后关闭面板，再失焦，美观，有面板关闭动画

解决

使用open 配合useState 实现面板控制