) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
console.log('Submitted value:', formData.get('animal')); // Will be "cat" (the key)
};
return (
);
}
```
### 校验行为
使用 `validationBehavior` prop 控制校验信息的展示方式：
```tsx
import { Button, ComboBox, FieldError, Form, Input, Label, ListBox } from '@heroui/react';
function ValidationExample() {
return (
{/* Native validation (default) - blocks form submission */}
{/* ARIA validation - shows errors in realtime, doesn't block submission */}
);
}
```
### 自定义校验
使用 `validate` prop 添加自定义校验逻辑：
```tsx
import { ComboBox, FieldError, Input, Label, ListBox } from '@heroui/react';
function CustomValidationExample() {
return (
{
if (!value || value.selectedKey === null) {
return 'Please select an animal';
}
if (value.selectedKey === 'snake') {
return 'Snakes are not allowed';
}
return true;
}}
>
Cat
Dog
Snake
);
}
```
### 只读
使用 `isReadOnly` 将 ComboBox 设为只读：
```tsx
import { ComboBox, Input, Label, ListBox } from '@heroui/react';
Cat
Dog
```
## 无障碍
ComboBox 实现 ARIA ComboBox 模式，并提供：
- 完整键盘导航
- 选择与输入变化时的屏幕阅读器播报
- 合理的焦点管理
- 禁用状态支持
- 输入过滤（typeahead）式搜索
- 与 HTML 表单的集成
- 自定义值支持
更多信息见 [React Aria ComboBox 文档](https://react-spectrum.adobe.com/react-aria/ComboBox.html)。
---
JGuang 全部资源索引: https://jiguang132.com/llms.txt