reactjs - How can I change the default value when there is nothing in select?

Question

我正在使用 React.js 使用此代码：

import React from "react";
import chroma from "chroma-js";

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

const colourStyles = {
  control: (styles) => ({ ...styles, backgroundColor: "white" }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? "#ccc"
        : isSelected
        ? chroma.contrast(color, "white") > 2
          ? "white"
          : "black"
        : data.color,
      cursor: isDisabled ? "not-allowed" : "default",

      ":active": {
        ...styles[":active"],
        backgroundColor:
          !isDisabled && (isSelected ? data.color : color.alpha(0.3).css())
      }
    };
  },
  multiValue: (styles, { data }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: color.alpha(0.1).css()
    };
  },
  multiValueLabel: (styles, { data }) => ({
    ...styles,
    color: data.color
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: data.color,
    ":hover": {
      backgroundColor: data.color,
      color: "white"
    }
  })
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    isMulti
    options={colourOptions}
    styles={colourStyles}
  />
);

我明白了：

但我想将其更改Select ...为My custom select. 我阅读了文档，但对此一无所知。

这是我的代码：https ://codesandbox.io/s/codesandboxer-example-forked-d41eq?file=/example.js:0-1480

Answer 1

创建 Select 组件时，您可以将占位符字符串传递给它。

<Select placeholder={"My custom Select"} />

Answer 2

如果我正确解释了您的问题，您希望将占位符值“选择...”更改为其他值。

这可以很容易地通过将组件传递给 React Select 来完成：

<Select placeholder={<div>Custom placeholder</div>} />