使用react-select和react-final-form字段数组的条件下拉菜单

import React from 'react';
import { FieldArray } from 'react-final-form-arrays';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  // 更多选项...
];

const MyForm = () => (
  <form>
    <FieldArray name="dropdowns">
      {arrayHelpers => (
        <div>
          {arrayHelpers.fields.map((name, index) => (
            <div key={name}>
              <Field name={name}>
                {({ input }) => (
                  <Select
                    {...input}
                    options={options}
                    isMulti // 如果需要多选，设置为 true
                  />
                )}
              </Field>
              <button type="button" onClick={() => arrayHelpers.remove(index)}>Remove</button>
            </div>
          ))}
          <button type="button" onClick={() => arrayHelpers.push('')}>Add Dropdown</button>
        </div>
      )}
    </FieldArray>
    <button type="submit">Submit</button>
  </form>
);

export default MyForm;

<Select
  {...input}
  options={options}
  onChange={(selectedOptions) => input.onChange(selectedOptions)}
/>