modal对话框组件的使用

普通提示弹框（不含输入内容）

1. 应用场景： 考生点击交卷按钮弹出一次提示是否确认交卷
2. 代码：
   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. 理解：
   3.1 对话框的open属性控制是否显现，传入的布尔值在最初useState里设为false；
   3.2 对话框onCancel属性控制的是遮罩层/右上角×/取消按钮的回调，当不需要取消按钮可以设置footer={null},不需要右上角×设置closable={false}。注意：onCancel属性不是只控制取消按钮这一个~
   3.3 原本交卷按钮需要的操作由onOk调用即可，注意：有的onOk调用不进行页面跳转时也需要setOpen为false。

含一个输入框的弹出框 eg

1. 应用场景： 打分框：点击填写数字，确认后页面渲染数字，
2. 代码：

// 函数部分
const [Score, setscore] = useState()
const [ExamId, setExamId] = useState()
const [scoreValue, setScoreValue] = useState(null)
const onChange = (value: number | null) => {if (value == null) returnsetscore(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部分modalOpen}onOk={Scoresave}onCancel={onCancel}key={ExamId}>0}precision={0}controls={false}value={scoreValue}onChange={onChange}id='scoreInput'/>

3. 理解：
   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 ('link'}onClick={() => {setExamId(row.examId)setModalOpen(true)}}>填写分数)},},

含表单的弹出框 eg Form,Form.Item

1. 应用场景：修改密码弹出：旧密码，新密码，确认新密码弹出框，并有提交/取消按钮
2. 代码：

// 函数部分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 = valuesawait patchPassword(data)logout()}{/* Modal 修改姓名，密码 */}wordOpen}footer={null}onCancel={() => {setWordOpen(false)form.resetFields()}}>form}layout='vertical'initialValues={{ remember: true }}onFinish={onFinish}>[{ required: true, message: '请输入原密码！' }]}>[{ required: true, message: '请输入新密码！' }]}>['newPassword']}// hasFeedbackrules={[{ required: true, message: '请确认新密码！' },({ getFieldValue }) => ({validator(_, value) {if (!value || getFieldValue('newPassword') === value) {return Promise.resolve()}return Promise.reject(new Error('两次输入的密码不匹配!'))},}),]}>20}>4} offset={8}>确定4}>() => {setWordOpen(false)form.resetFields()}}>取消

3. 理解：
   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()重置表单

弹出框作为子组件

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