react模态框表单总结

2024-05-08 12:01:05 浏览数 (2)

antd的表单操作比较细致,功能较多,我们工作中常用的无非增加内容的表单和编辑的表单,增加内容的表单初始化时,大部分默认值为null的装填,偶尔有一些需要设置初始值,如性别或者一些必选属性。

编辑表单需要获取原来的内容然后初始化,react框架一般会有两种模式来初始化:

一种是绑定form值,初始化一个filed类似

代码语言:js复制
const [form] = Form.useForm();

然后将这个值绑定到form上:

然后这个form对象上有一些方法可以使用:

代码语言:js复制
form.resetFields()
 form.setFieldsValue(
            {
                ...currentTag
            })

通过这个form我们可以控制表单,但是有些时候表单初始化会有一些操作,使得数据不同步,此时就不能使用上面form的一些方法了。

antd中提供了第二种模式,我们可以使用initvalue设置初始值,此时表单初始化时会根据这个值来初始化表单,所有初始化的操作都是根据这个值。

还有就是表单提交时,是使用表单上form的事件,还是从form中提取值后在提交,也是有选择的,前者可以用绑定form的form获取表单数据,后者可以绑定form的事件,前者的话数据验证再提交函数中,后者的话可以根据antd的框架特性在formitem上设置rules来做校检,并且显示提示信息。

表单如果是放在模态框中的,那么当模态框显示时,需要得到要显示的数据,或者要确定是那一条数据,一般情况下我会再当前组件设置一个currentData来指代当前数据,并将其传入模态框,并且将visibale和setVisible也传递过去,而模态框需要做的就是展示数据,在对应的按键上添加提交事件。

这里有个问题,如果表单提交后,当前组件需要更新,那么还需要传递一个函数给模态框,方便模态框提交数据后再调用更新函数,关于提交函数是传递过去,还是定义在当前组件,我有如下的看法,一般的情况下我会定义在模态框中,这样做到功能隔离,谁的事情谁来做,而不是在父组件中定义好了再传递到子组件,这样增加了组件的耦合性。

以上便是我对模态框表单使用的总结,希望对你有所帮助

0 人点赞