antd select onChange函数中的第二个参数是什么？

问题描述

嘿，我有容器组件，它将onChange事件向下传递到AntD选择输入。我想将其传递并用于输入。

我不需要在第二个参数中输入什么类型

var onChange: ((value: string | undefined,option: OptionsType | OptionData | OptionGroupData) => void) | undefined

容器看起来像这样

export const TagsInputContainer = ({ value,onChange }: ContainerProps) => {
  const { loading,payload,error } = useQuery(fetchTags({ perPage: PER_PAGE }));
  console.log('value in Container',value);

  const handleChange = (value: any) => {
    console.log('handleChange value',value);
    if (value) {
      setInputValue(value);
      onChange(value);
    }
  };

  return <TagsInput loading={loading} error={error} tags={payload?.results} 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>
  );
};

解决方法

第二个参数将传递给用户选择的完整选项对象。

第一个参数将仅接收选项的值，通常是您想要的东西。但是有时您可能想访问选项中设置的所有道具，而不仅仅是价值。在这种情况下，您可以在onChange处理程序中使用第二个参数。

第二个参数的使用是可选的。不需要在那里“放东西”，如果需要，您可以忽略它。

例如，如果所选选项如下所示：

<Select.Option key={1} value={3}>
    Foobar
</Select.Option>

...从AntD到您的onChange处理程序的调用将是：

onChange( 3,{key: 1,value: 3,children: 'Foobar'} )