隐藏 select 上的空行

Question

我有使用 React 的代码，我有 select，我希望在我得到空标签和值的情况下我不想要这些项目。怎么可能？

这是我的代码：

import React, { Component } from "react";
import Select from "react-select";
import { useState } from "react";

let cheeses = [
  "Wagasi",
  "Kalari",
  "Halloumi",
  "Manouri"
];

let options = [];
options = options.concat(cheeses.map((x) => "Cheese - " + x));

const Foo = () => {
  const [value, setValue] = useState("");

  function MakeOption(x) {
    if(value){
    return { value: x, label: x };
    }
    else{
      return {value: "", label: ""};
    }
  }


  const handleInputChange = (value, e) => {
    if (e.action === "input-change") {
      setValue(value);
    }
  };

  return (
    <Select
      isMulti
      name="colors"
      options={options.map((x) => MakeOption(x))}
      className="basic-multi-select"
      classNamePrefix="select"
      closeMenuOnSelect={false}
      onInputChange={handleInputChange}
      inputValue={value}
      noOptionsMessage={() => null}
    />
  );
};

export default Foo;

那一刻我明白了:

你能帮帮我吗？

Answer 1

您可以在 map 之后过滤数组：

options={options.map((x) => MakeOption(x)).filter(opt => opt.value !== "")}

隐藏 select 上的空行

Hide the empty line on a select

html

select

reactjs

tailwind-css