使用 react-select 始终显示占位符

【问题标题】：Show always placeholder using react-select使用 react-select 始终显示占位符
【发布时间】：2020-08-31 18:09:51
【问题描述】：

即使选择了一些项目，是否有办法始终显示占位符组件？我希望占位符位于与通常相同的位置，而不是在选择的顶部或上方。

【问题讨论】：

您必须创建一个自定义占位符，因为根据定义，占位符仅在输入没有值时可见。
我试过了，但是当有一些项目被选中时，占位符组件没有呈现

【解决方案1】：

你可以注入占位符example

// @flow

import React, { useRef, useEffect } from "react";

import Select from "react-select";
import makeAnimated from "react-select/animated";
import { colourOptions } from "./docs/data";

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.select.inputRef.style.minWidth = "100px";
    myRef.current.select.inputRef.placeholder = "Placeholder#1";
  }, []);

  return (
    <Select
      ref={myRef}
      placeholder=""
      closeMenuOnSelect={false}
      components={animatedComponents}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
}

【讨论】：