如何将Polaris Combobox直接对接@shopify/react-form？

完全可以实现对接，核心是在表单字段的变更回调中同时处理Combobox的选项过滤逻辑，无需放弃useForm对字段的控制。以下是具体实现示例：

核心实现代码 #

import {useForm, Form, Field} from '@shopify/react-form';
import {Combobox, TextField, Option} from '@shopify/polaris';
import {useState} from 'react';

const ProductComboboxForm = () => {
  // 原始选项列表
  const baseOptions = [
    {label: '纯棉衬衫', value: 'cotton-shirt'},
    {label: '休闲牛仔裤', value: 'casual-jeans'},
    {label: '运动跑鞋', value: 'sports-shoes'},
    {label: '针织毛衣', value: 'knit-sweater'},
  ];

  // 维护过滤后的选项状态
  const [filteredOptions, setFilteredOptions] = useState(baseOptions);

  const {handleSubmit, fields} = useForm({
    initialValues: {selectedProduct: ''},
    onSubmit: (formValues) => {
      console.log('提交的表单数据:', formValues);
      // 这里添加表单提交逻辑
    },
  });

  return (
    <Form onSubmit={handleSubmit}>
      <Field
        name="selectedProduct"
        render={({field, error}) => (
          <Combobox
            options={filteredOptions}
            selected={filteredOptions.find(opt => opt.value === field.value)}
            // 处理选项选中事件，同步表单值
            onSelect={(selectedOption) => {
              field.onChange(selectedOption.value);
            }}
            // 处理输入框内容变更，同时更新表单值和过滤选项
            onInputChange={(inputValue) => {
              // 先同步表单字段值
              field.onChange(inputValue);
              // 执行选项过滤逻辑
              const filtered = baseOptions.filter(option =>
                option.label.toLowerCase().includes(inputValue.toLowerCase())
              );
              setFilteredOptions(filtered);
            }}
          >
            <TextField
              value={field.value}
              onChange={field.onChange}
              error={error}
              placeholder="搜索产品"
              autoComplete="off"
            />
          </Combobox>
        )}
      />
      <button type="submit" style={{marginTop: '16px'}}>提交表单</button>
    </Form>
  );
};

export default ProductComboboxForm;

关键逻辑说明 #

• 分离状态管理：用useState单独维护filteredOptions，避免和表单状态耦合
• 同步表单与过滤：在onInputChange中先调用field.onChange更新表单字段，再执行过滤逻辑更新选项列表
• 选项选中同步：onSelect事件中直接将选中选项的value传给field.onChange，确保表单值与选中状态一致

这种方式既保留了useForm对表单的统一控制，又实现了Combobox的实时过滤功能，完全适配你的需求。

内容的提问来源于stack exchange，提问作者Gavin