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

Question

嘿，我有一个容器组件，它将 onChange 事件传递给 AntD select 输入。我想把它传递下来并在输入中使用。

我不知道在第二个参数中放什么，类型看起来像这样

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>
  );
};

Answer 1

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

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

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

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

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

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

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

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

What is the second argument in antd select onChange function?

typescript

reactjs

antd

react-hook-form