时间戳

首页 > 解决方案 > antd select onChange 函数中的第二个参数是什么？

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

标签： reactjstypescriptantdreact-hook-form

解决方案

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

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

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

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

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

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

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

推荐阅读