如何在 React 中获取自定义下拉菜单的选定值

Question

我正在使用样式化组件和打字稿，我想获取自定义下拉列表的 selected 选项的值，但我不明白为什么它不起作用。如果我从本机 select 元素中删除不透明度，我可以看到该值已更新，但这不是我想要的。（我刚开始使用打字稿）这是我的下拉菜单：

  label?: string;
  value?: string;
  iconId?: IconId;
}

const SelectGroup = styled.div`
  position: relative;
  width: max-content;
`;

const NativeSelect = styled.select`
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
`;

const CustomSelect = styled.div`
  border: 1px solid;
  line-height: 2rem;
  width: 25rem;
  height: 5rem;
  border-color: rgba(255, 255, 255, 0.4);
  background: ${theme.color.darkGrey};
  color: ${theme.color.white};
  transition: border-color 0.15s ease-in;

  ${NativeSelect}:focus + & {
    border-color: rgba(255, 255, 255, 0.8);
  }
`;

const IconContainer = styled.div`
  position: absolute;
  top: 1.4rem;
  right: 2rem;
  pointer-events: none;
`;

const InputLabel = styled.label`
  display: block;
  padding-bottom: 1rem;
  color: ${theme.color.white};
  font-size: ${theme.font.size.small};
`;

export const SelectInput: FC<SelectProps> = ({
  label,
  value,
  iconId,
  children,
}) => {
  return (
    <>
      <InputLabel>{label}</InputLabel>
      <SelectGroup>
        <NativeSelect value={value}>{children}</NativeSelect>
        <CustomSelect>
          <IconContainer>
            <Icon iconId={iconId} />
          </IconContainer>
        </CustomSelect>
      </SelectGroup>
    </>
  );
};

 const [inputValue, setInputValue] = useState('');
  const updateInputValue = (value: string): void => {
    setInputValue(value);
  };

          <SelectInput
            label="Select"
            iconId="select"
            defaultValue={inputValue}
            onChange={e => updateInputValue(e.target.value)}
          >
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
          </SelectInput>

Answer 1

您错过了 SelectInput 中的 value 属性。 defaultValue 仅在初始加载时设置值，如果我们想要更改我们更新值属性。由于组件是受控的，SelectInput 的值发生变化，我们需要更新它。


 <SelectInput
    label="Select"
    iconId="select"
    defaultValue={inputValue}
    value={inputValue}
    onChange={e => updateInputValue(e.target.value)}
>
    <option value="saab">Saab</option>
    <option value="volvo">Volvo</option>
</SelectInput>

如何在 React 中获取自定义下拉菜单的选定值

How can I get selected value of a custom dropdown menu in React

input

typescript

reactjs

dropdown

styled-components