无法正确重置 react-select 的值和标签

Question

我有一个带有反应选择标签的反应组件来过滤表格中的数据。 我想在某个事件发生时清除 select 标签的值和标签（我的意思是选择元素中显示的文本）。

所以我尝试创建一个按钮来触发 resetSelect()，但它不起作用。 另一个问题是，当我从 select 中选择一个选项时，标签不会改变。

export default function Filters({ onFilterChange }) {

  const [types, setTypes] = useState([{}]);
  const [selectedType, setSelectedType] = useState(null);

  const fromJsonToOptions = (json) => {
    const options = [
      { label: "all", value: null },
      ...json.map((obj) => ({
        label: obj.name,
        value: obj._id,
      })),
    ];
    return options;
  };

  useEffect(() => {
    //request to get types to put in select options
    const responseData = response.data;
    const options = fromJsonToOptions(responseData);
    setTypes(options);
  }, []);

  const handleFilterChange = (filterName, filterValue) => {
    if (filterName === "type") {
      setSelectedType(filterValue);
    }
    onFilterChange(filterName, filterValue); //pass data to another component to render the table
  };

  const resetSelect = () => {
    setSelectedType(null);
  };

  return (
      <div>
        <Select
          options={types}
          placeholder="all"
          onChange={(selectedOption) => {
            handleFilterChange("type", selectedOption.value);
          }}
          value={selectedType}
        />
        <button onClick={resetSelect}> reset </button>
    </div>
  );
}

Answer 1

要清除select标签的value和label，可以将select标签的value和defaultValue属性设置为null。

试试这个：

import { useState, useEffect } from "react";

export default function Filters({ onFilterChange }) {
  const [types, setTypes] = useState([]);
  const [selectedType, setSelectedType] = useState(null);

  const fromJsonToOptions = (json) => {
    const options = [
      { label: "all", value: null },
      ...json.map((obj) => ({
        label: obj.name,
        value: obj._id,
      })),
    ];
    return options;
  };

  useEffect(() => {
    //request to get types to put in select options
    const responseData = response.data;
    const options = fromJsonToOptions(responseData);
    setTypes(options);
  }, []);

  const handleFilterChange = (filterName, filterValue) => {
    if (filterName === "type") {
      setSelectedType(filterValue);
    }
    onFilterChange(filterName, filterValue); //pass data to another component to render the table
  };

  const resetSelect = () => {
    setSelectedType(null);
    document.getElementById("type-select").value = null;
    document.getElementById("type-select").defaultValue = null;
  };

  return (
    <>
      <select
        id="type-select"
        value={selectedType}
        defaultValue={null}
        onChange={(e) => handleFilterChange("type", e.target.value)}
      >
        {types.map(({ label, value }) => (
          <option key={value} value={value}>
            {label}
          </option>
        ))}
      </select>
      <button onClick={resetSelect}>Clear</button>
    </>
  );
}