---
title: 如何编写高可读、可复用的React表单创建与编辑
category: react react-hook-form
---

适用表单进行信息录入、资源创建是企业级应用的一个最常见不过的场景，而表单的常见场景有创建、基于己有数据进行回填与编辑、删除表单等。笔者在新近的项目中发现，在表单的创建流程和编辑流程之间如何高效地复用代码、同时有效地区分开两个流程的差异，进而获得高可读、可复用的表单代码，是一个常见的问题。本篇初衷即是探寻React中同一份表单的创建和编辑的最佳实践。如果后面有灵感，可能会再扩写成一个关于React表单面面谈的系列文章。

## 大纲

* 基本的表单创建：必填字段、校验与提交（一波提交 v.s. 分阶段提交）
* 表单编辑I：不同的字段校验逻辑：编辑时字段不可修改
* 表单编辑II：不同的字段校验逻辑：创建时不能重名、编辑时可以重名
* 表单编辑III：不同的API调用（Create API和Update API）
* WIP等（participants逻辑等）
* WIP：可以把Step2这里的逻辑都梳理下，什么不能M1没Add的时候就去Add M2否则会导致main form里没有0只有1了（那么这个又如何判断，组件如何设计了），两个不能同时edit了（跟上点是同样的问题等）。

## 内容