在创建和编辑页面中使用相同表单组件的良好实践

Question

我有一个包含 30-40 个字段的拥挤表单，其中大多数都有相当复杂的逻辑。可以理解的是，我想让这些表单区域可重复用于创建和编辑页面，因为两者在表单项和字段方面是相同的。我毫不费力地让它们工作，而且它们在大多数情况下都工作得很好，除了对可重用性的追求引入了一些其他挑战，现在我怀疑这是否值得。

对我来说，使用相同的表单进行创建和编辑的一些挑战是：

• 条件无处不在。想要使字段在编辑模式下不可编辑吗？额外的道具可以传入并禁用这些道具的所述字段。

• 编辑模式需要初始状态，因此表单字段会填充现有数据，但创建页面不喜欢这样，所以甚至更多、更糟糕的情况，例如：

const { user } = React.useContext(DetailContext) ?? {}; // I know...
const [userType, setUserType] = useState(user?.user_type ?? null); // yep

此时我什至无法决定如何安全地分配和使用东西，而且我无法估计哪些部分容易损坏。

这是不可避免的、很好的事情还是这完全是愚蠢的？使表单区域或表单可重用有哪些好的做法？我可以在不牺牲可重用性的情况下降低噪音吗？

Answer 1

这个问题确实有点广泛，但通用的解决方案可能仍然对您有帮助。您需要考虑以下几个要点：

1. 所有字段是否都存在于编辑和创建模式中，或者可能存在并非所有字段都包含在其中的情况？
2. 是否有在创建时提供但之后无法编辑的字段（在编辑模式下）？
3. 创建表单字段是否有初始值？

我会通过以下方式解决这个问题：

您将拥有一个接受字段属性作为参数（组件属性）的表单组件。对于每个字段，您提供以下信息：

1. 初始值（如果有） ( initialValue)
2. 该字段是否应该出现在表单中 ( isDisplayed)
3. 如果该字段应该存在但被禁用 ( isDisabled)

通过这种方式，您可以覆盖前面提到的所有要点，同时保留单个表单组件。此外，您将提供一个参数，例如mode可能的值edit/ create，它指导表单逻辑以及如何处理表单提交（处理逻辑的差异、不同的端点等）。然后，在您的表单组件中，您必须根据提供的参数进行一些检查，即给定的表单输入是否应该被禁用（如果isDisabled为 true）或是否应该显示 - isDisplayed。

它不是一个完美的解决方案，但它足够灵活，使您能够使用相同的表单模板并共享大部分处理逻辑。但是，如果您在编辑/创建表单的结构方面存在巨大差异，那么您可能最好通过引入两个单独的组件来重复一些逻辑，但可以节省您的理智和时间来弄清楚如何覆盖和抽象您的每个新扩展想介绍其中之一。