如何限制antd中select中创建标签的字符？答案

【问题标题】：How to limit characters for created tags in select in antd?如何限制antd中select中创建标签的字符？
【发布时间】：2020-09-05 14:07:23
【问题描述】：

我有一个 antd select，我想限制 select 元素内新创建的标签的字符数。我已经在codesandbox中准备了demo。

只是我想禁止用户创建太长的标签。

更改事件value 仅显示创建的标签。应用程序中的标签将从我刚刚硬编码的 sanbox 中的 API 加载。

https://codesandbox.io/s/antd-tags-max-length-dh28f

带有 onChange 的容器

export const TagsInputContainer = ({ value, onChange }: ContainerProps) => {
  console.log("value in Container", value);
  const tagsfromAPI = [{ tag: "test" }, { tag: "sport" }, { tag: "education" }];
  const handleChange = (value: any) => {
    if (value) {
      onChange(value);
    }
  };

  return (
    <TagsInput
      loading={false}
      error={false}
      tags={tagsfromAPI}
      onChange={handleChange}
    />
  );
};

标签输入

export const TagsInput = ({ tags, onChange }: Props) => {
  const { Option } = Select;
  let children: Array<ReactNode> = [];
  if (tags) {
    children = tags.map((tag: { tag: string }, idx: number) => {
      return (
        <Option value={tag.tag} key={idx}>
          {tag.tag}
        </Option>
      );
    });
  }

  return (
    <Styled.TagsSelect
      placeholder="Dodaj tagi"
      mode="tags"
      onChange={onChange}
      maxTagTextLength={INPUT_VALIDATE.tagCharMax}
    >
      {children}
    </Styled.TagsSelect>
  );
};

【问题讨论】：

谢谢。您认为我应该在TagsInput 中的map 内添加一些if 语句吗？
是的，用户可以输入尽可能多的内容，但是输入后应该验证新创建的标签的长度是否正确，如果不正确，我想在输入下方放置一些错误消息。
现在知道了。也许您可以在 TagsInputContainer 内的 handleChange 函数上处理它。您可以检查是否所有输入的值都比您想要的长度短。（如：codesandbox.io/s/antd-tags-max-length-forked-tkch1?file=/src/…）。但还有很多事情要做。您应该只将有效标签绑定到tags 参数。你也应该以某种方式尝试绑定自动选择输入的值，这样你也可以从那里删除长的东西。（并不是说这个小提琴只是一个错误的代码，但它会给你这个想法。）。

标签： javascript reactjs antd

【解决方案1】：

首先非常感谢 Yaya，但我想出了另一个解决方案。由于我使用的是 React Hook Form，我可以简单地使用他们的 validate function 验证标签


<Controller
        as={
          <TagsInputContainer
            validationError={errors.tags}
            errorText={t('addEntry.tagError')}
            name="tags"
            label={t('addEntry.tags')}
          />
        }
        control={control}
        type="text"
        name="tags"
        rules={{
          validate: (value: string[]) => {
            return validateTags(value);
          },
        }}
      />

验证标签功能如下所示

export const isValidTag = (tag: string) => {
  return tag.length < INPUT_VALIDATE.tagCharMax;
};

export const validateTags = (tags: string[]) => {
  if (tags.length === 0) {
    return true;
  }

  return tags.every(isValidTag);
};

【讨论】：