react模态框表单总结
原创
antd的表单操作比较细致，功能较多，我们工作中常用的无非增加内容的表单和编辑的表单，增加内容的表单初始化时，大部分默认值为null的装填，偶尔有一些需要设置初始值，如性别或者一些必选属性。
编辑表单需要获取原来的内容然后初始化，react框架一般会有两种模式来初始化：
一种是绑定form值，初始化一个filed类似
const [form] = Form.useForm();然后将这个值绑定到form上：
然后这个form对象上有一些方法可以使用：
form.resetFields()
form.setFieldsValue(
{
...currentTag
})通过这个form我们可以控制表单，但是有些时候表单初始化会有一些操作，使得数据不同步，此时就不能使用上面form的一些方法了。
antd中提供了第二种模式，我们可以使用initvalue设置初始值，此时表单初始化时会根据这个值来初始化表单，所有初始化的操作都是根据这个值。
还有就是表单提交时，是使用表单上form的事件，还是从form中提取值后在提交，也是有选择的，前者可以用绑定form的form获取表单数据，后者可以绑定form的事件，前者的话数据验证再提交函数中，后者的话可以根据antd的框架特性在formitem上设置rules来做校检，并且显示提示信息。
表单如果是放在模态框中的，那么当模态框显示时，需要得到要显示的数据，或者要确定是那一条数据，一般情况下我会再当前组件设置一个currentData来指代当前数据，并将其传入模态框，并且将visibale和setVisible也传递过去，而模态框需要做的就是展示数据，在对应的按键上添加提交事件。
这里有个问题，如果表单提交后，当前组件需要更新，那么还需要传递一个函数给模态框，方便模态框提交数据后再调用更新函数，关于提交函数是传递过去，还是定义在当前组件，我有如下的看法，一般的情况下我会定义在模态框中，这样做到功能隔离，谁的事情谁来做，而不是在父组件中定义好了再传递到子组件，这样增加了组件的耦合性。
以上便是我对模态框表单使用的总结，希望对你有所帮助
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。