9、复杂表单交互的实现与测试

复杂表单交互的实现与测试

在开发表单组件时，我们常常需要处理各种复杂的交互，如预选择值、构建日历视图、添加单选按钮组等。下面将详细介绍如何实现这些功能并进行相应的测试。

1. 处理组件属性与默认值

在开发 AppointmentForm 组件时，我们引入了新的属性，这可能会导致之前的测试失败。为了解决这个问题，我们可以使用 defaultProps 来为组件提供默认值。

操作步骤如下：
1. 检查最新的测试是否通过，若之前的测试因新属性的引入而失败。
2. 在 src/AppointmentForm.js 中 AppointmentForm 函数定义的下方添加 defaultProps ：

AppointmentForm.defaultProps = {
    selectableServices: [
        "Cut",
        "Blow-dry",
        "Cut & color",
        "Beard trim",
        "Cut & beard trim",
        "Extensions",
    ]
};

3. 运行测试，确保所有测试都通过。

2. 预选择值

当编辑现有预约时，我们希望组件能预选择已保存的值。具体操