ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.

Home Page:https://mobile.ant.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Picker 选择器指令能否提供关闭所有打开的Picker

Alibaba-Jarry opened this issue · comments

Version of antd-mobile

5.33.0

What is this feature about?

在使用指令式的Picker的时候,用户返回页面,Picker还是存在于当前页面,希望提供一个类似:‘’可以通过调用 Modal 上的 clear 方法关闭所有打开的弹窗,通常用于路由监听中,处理路由前进、后退不能关闭弹窗的问题。‘’

Picker 是通过 visible 受控控制,全局的控制方法不符合 React 的设计规范。但是如果业务里真的要这么搞,你可以 HOC 一下 Picker 组件,然后自行控制该逻辑:

const closeFnSet = new Set();

const MyPicker = (props) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onClose = () => setVisible(false);
    closeFnSet.add(closeFnList);

     return () => {
      closeFnSet.delete(closeFnSet);
    }
  }, []);

  return <Picker visible={visible} />
}

// 写个全局方法遍历 closeFnSet,调用删除