14、表单优化与数据搜索：提升用户体验与开发效率

表单优化与数据搜索：提升用户体验与开发效率

表单提交与验证

在表单提交方面，我们允许用户随时点击提交按钮，若表单未填写完整，提交将被取消，所有字段会同时显示验证错误。具体操作步骤如下：
1. 更新测试数据 ：在 test/CustomerForm.test.js 顶部定义 validCustomer 对象：

const validCustomer = {
  firstName: 'first',
  lastName: 'last',
  phoneNumber: '123456789'
};

2. 修改模拟提交测试 ：将每个模拟提交事件的测试用 validCustomer 对象挂载：

render(<CustomerForm {...validCustomer} />);

若测试有自己的属性，确保在覆盖属性之前传入 validCustomer ：

render(
  <CustomerForm
    {...validCustomer}
    {...{ [fieldName]: 'value' }}
  /&