modal对话框组件的使用

2023-06-10 00:15| 来源: 网络整理| 查看: 265

modal对话框组件的使用普通提示弹框（不含输入内容）应用场景：考生点击交卷按钮弹出一次提示是否确认交卷代码： ts函数部分

const [open, setOpen] = useState(false) const hide = () => { setOpen(false) } const handleEnd = () => { setOpen(true) } const end = async () => { await postExamAnswer(Number(params.examId), { isEnd: true, answer: userAnswer.current.map((item) => ({ questionNumber: item.questionNumber, answer: item.userAnswer, })), }) clearInterval(timer.current) navigate(${prefix}paperEnd) localStorage.removeItem(‘examinee-token’) }

HTML部分： ```html 交卷

请问您是否确定提交试卷

理解： 3.1 对话框的open属性控制是否显现，传入的布尔值在最初useState里设为false； 3.2 对话框onCancel属性控制的是遮罩层/右上角×/取消按钮的回调，当不需要取消按钮可以设置footer={null},不需要右上角×设置closable={false}。注意：onCancel属性不是只控制取消按钮这一个~ 3.3 原本交卷按钮需要的操作由onOk调用即可，注意：有的onOk调用不进行页面跳转时也需要setOpen为false。含一个输入框的弹出框 eg 应用场景：打分框：点击填写数字，确认后页面渲染数字，代码： // 函数部分 const [Score, setscore] = useState() const [ExamId, setExamId] = useState() const [scoreValue, setScoreValue] = useState(null) const onChange = (value: number | null) => { if (value == null) return setscore(value) setScoreValue(value) } const Scoresave = () => { setScore(Number(ExamId), Number(Score)).then(() => { message.success('分数设置成功') onCancel() getInfo() }) } const onCancel = () => { setModalOpen(false) setScoreValue(null) // const scoreElement: HTMLElement | null = document.getElementById('scoreInput')! // scoreElement.value = '' } // HTML部分 Scoresave} onCancel={onCancel} key={ExamId}> 0} controls={false} value={scoreValue} onChange={onChange} id='scoreInput' /> 理解： 3.1 如何存值： onChange监听input输入并把值setscore，这样Modal里onOk调用可以拿到这个值传后端，同时渲染列表显示填写的数字；

3.2 输入但不提交，取消后在进入仍保留上一次输入的值：

原本搜索有用原生js通过id获取HTMLElement改变value，但ts类型总是报错，如下代码标红并未解决这个问题： const scoreElement: HTMLElement | null = document.getElementById('scoreInput')! scoreElement.value = '' 在onCancel时设置setScoreValue(null)，同时input需要属性value={scoreValue}显示在这个数值（易忘…）3.3 填写0 在 if (！value )条件下视为null, 所以改为：if (value == null) 并且column里： { title: '考试分数', dataIndex: 'score', key: 'score', align: 'center', width: '80px', editable: false, // render: (text: string) => { // return text || '--' // }, render: (text: string, row: ExamList) => { if (text != null) return text // 输入0也可以显示 return ( () => { setExamId(row.examId) setModalOpen(true) }}> 填写分数 ) }, }, 含表单的弹出框 eg Form,Form.Item 应用场景：修改密码弹出：旧密码，新密码，确认新密码弹出框，并有提交/取消按钮代码： // 函数部分 const [form] = Form.useForm() const [wordOpen, setWordOpen] = useState(false) // const [nameOpen, setNameOpen] = useState(false) // 完成修改密码 const onFinish = async (values: { oldPassword: string; newPassword: string }) => { const data: IPassWord = values await patchPassword(data) logout() } {/* Modal 修改姓名，密码 */} null} onCancel={() => { setWordOpen(false) form.resetFields() }} > { remember: true }} onFinish={onFinish} > required: true, message: '请输入原密码！' }]} > required: true, message: '请输入新密码！' }]} > [ { required: true, message: '请确认新密码！' }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue('newPassword') === value) { return Promise.resolve() } return Promise.reject(new Error('两次输入的密码不匹配!')) }, }), ]} > 4} offset={8}> 确定 () => { setWordOpen(false) form.resetFields() }} > 取消理解： 3.1 如何存值：这里每个输入框onChange就费事，希望可以通过表单Form操作，通常表单提交使用onFinish获得Item的values，但如果没有Button提交按钮，操作Modal上的onOk并不能获取values，首先想到的是用Form的onValuesChange：function(changedValues allValues)，字段值更新时触发回调事件。最初设置 if(changedValues.oldPassword){ setOldPassword(changedValues.oldPassword) }

但是问题是我输入后再删除，oldPassword也会随之变化到最后一个数值，eg先输入123456再删除，最后oldPassword=1，因为删完1为空不再进这里的if了，

最后想到不需要Modal的两个确认取消按钮，即footer={null}，这里注意onCancel控制的不仅是取消按钮，禁了footer就不显示取消按钮了，onCancel仍需保留实现右上角×和遮布退出的功能；添加Item，button，并且分布使用Row,Col分布两个按钮： span表示按钮占了几位， offset表示由左到右偏离了几位， Row的gutter：栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]

3.2 解决回显：表单清空就很方便，Form添加form属性;form定义: const [form] = Form.useForm();取消按钮点击时：form.resetFields()重置表单

弹出框作为子组件应用场景：内容过多，需要复用，单独做一个组件代码：传入open的值（false/true控制是否显示）；传入设置open的方法（Modal也有set方法取消可视，父组件也有set方法设置可视）理解：代码优化可用，便于后期维护，组件复用

【本文地址】

modal对话框组件的使用

modal对话框组件的使用

今日新闻

推荐新闻