如何在所選選項上方的反應選擇中插入標題？

Question

我想向 react-select 添加靜態標題，該標題將出現在我當前選擇的選項上方。

如何使用 react-select 完成？

謝謝你 ：）

Answer 1

我認為您正在尋找 InputLabel（Material-UI 等效項）。

在 react-select 中有一個選項可以添加帶有占位符道具的標簽。 當您從下拉列表中選擇某些內容時，它只會顯示在頂部，但我認為這是一個好的開始。

看一下例子： https : //codesandbox.io/s/6x9405rlqk

未選擇任何內容時要在輸入中顯示的占位符組件。 默認情況下，它是文本“選擇...”有關更多詳細信息，請參閱道具文檔： https : //react-select.com/props#select-props

Answer 2

看起來浮動標簽正是您要找的。 “占位符”意味着在輸入實際輸入時消失，因此試圖使占位符作為標簽工作是違反直覺的。

您可以通過向自定義控件組件添加標簽來為 react-select 添加浮動標簽：

// CustomControl.tsx

import React from "react";
import styled from "styled-components";
import { components } from "react-select";

export const Control = (props: any) => {
  return (
    <>
      <Label isFloating={props.isFocused || props.hasValue}>Select</Label>
      <components.Control {...props} />
    </>
  );
};

const Label = styled.label<{ isFloating?: boolean }>`
  left: 10px;
  pointer-events: none;
  position: absolute;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;

  top: ${(props) => (props.isFloating ? `5px` : `35%`)};
  font-size: ${(props) => (props.isFloating ? `0.5rem` : `1rem`)};
`;

然后只需將此自定義控件組件添加到 Select 中即可：

<Select 
  ...
  components={{ Control }} 
  placeholder=""
/>

現場演示| GitHub 問題