Antd 设置了可以从 Select 组件中选择的标签的最大限制

Question

我在模式标签中使用来自 AntD 的 Select 组件来创建一个标签输入选择器，它允许用户选择最多 5 个他们选择的随机标签。

const [optionsSelected, setOptionsSelected] = useState([]);

    const handleSelect = value => {
        console.log(value, optionsSelected);

        const options = optionsSelected.concat(value);
        setOptionsSelected(options.slice(0, 5));
    };

    return (
        <Form.Item
            name="keywords"
            label={<strong>Keywords</strong>}
            rules={[{required: true}]}
        >
            <Select
                mode="tags"
                maxTagTextLength={20}
                placeholder="e.g. JavaScript, Engineer, QA, Marketing, Customer Success, etc."
                notFoundContent={<div>Enter a keyword. Press enter to select it.</div>}
                onSelect={handleSelect}
                value={optionsSelected}
            />
        </Form.Item>
    );

但是我似乎无法让它工作，所以如果用户尝试选择超过 5 个标签，那么它不会允许他们这样做。 任何想法如何实现这一目标？

Answer 1

当所选计数等于max允许的计数时，可以跟踪所选项目计数和禁用未选择的选项：

function toRawValue(optionValue) {
  return typeof optionValue === "object" ? optionValue.value : optionValue;
}

export function MultiSelect({
  maxSelected,
  options: originalOptions,
  onChange: originalOnChange,
  ...selectProps
}) {
  const [selectedValues, setSelectedValues] = useState([]);

  // Proxy options to conditionally disable them
  const options = useMemo(() => {
    if (originalOptions === undefined) {
      return originalOptions;
    }

    const isMaxSelected = selectedValues.length === maxSelected;

    return originalOptions.map((option) => ({
      ...option,
      // Disable/enable unselected items to prevent/allow selection
      ...(!selectedValues.includes(option.value) && {
        disabled: isMaxSelected,
      }),
    }));
  }, [originalOptions, maxSelected, selectedValues]);

  const onChange = useCallback<OnChangeHandler>(
    (values, option) => {
      setSelectedValues(values.map(toRawValue));

      originalOnChange?.(values, option);
    },
    [originalOnChange],
  );

  return (
    <Select
      {...selectProps}
      options={options}
      mode="multiple"
      onChange={onChange}
    />
  );
}

相关issue on the repository

Answer 2

我通过在 handleSelect 中执行以下操作找到了解决方案：

const handleSelect = () => {
        form.setFieldsValue({
            keywords: form.getFieldValue('keywords').slice(0, 5),
        });
    };