语义 UI React Uncontrolled Dropdown Clear

Question

我目前正在使用语义 UI React 的“下拉”组件。我需要这个组件不受控制（即没有“价值”道具）。我有一个包含数百个输入的表单，当它受到控制时，我运行遇到了主要的性能问题。

我运行遇到的问题是，我需要能够将 Dropdown 组件“清除”为 null。有没有办法用语义 UI 下拉列表的“参考”来做到这一点？例如，在单击按钮时，我需要清除下拉菜单 - 但我不想要受控的下拉菜单。

import React, { createRef } from "react";
import { Dropdown, Ref, Button } from "semantic-ui-react";

const friendOptions = [
  {
    key: "Jenny Hess",
    text: "Jenny Hess",
    value: "Jenny Hess",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/jenny.jpg"
    }
  },
  {
    key: "Elliot Fu",
    text: "Elliot Fu",
    value: "Elliot Fu",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/elliot.jpg"
    }
  },
  {
    key: "Stevie Feliciano",
    text: "Stevie Feliciano",
    value: "Stevie Feliciano",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/stevie.jpg"
    }
  },
  {
    key: "Christian",
    text: "Christian",
    value: "Christian",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/christian.jpg"
    }
  },
  {
    key: "Matt",
    text: "Matt",
    value: "Matt",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/matt.jpg"
    }
  },
  {
    key: "Justen Kitsune",
    text: "Justen Kitsune",
    value: "Justen Kitsune",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/justen.jpg"
    }
  }
];

const DropdownExampleSelection = () => {
  var dropdownItem = createRef();

  const handleClick = e => {
    var element = dropdownItem.current.querySelector('[aria-selected="true"]');
    if (element) {
      element.setAttribute("aria-selected", "false");
      element.setAttribute("class", "item");
      // console.log(element.querySelector(".text").innerHTML());
      console.log(element.querySelector(".text"));
      // element.querySelector(".text").innerHTML = "";
      // console.log(dropdownItem.current.querySelector(".text"));
      dropdownItem.current.querySelector(".text").innerHTML = '';
    }

    // dropdownItem.current.lastChild.firstChild.focus();
  };

  return (
    <>
      <Ref innerRef={dropdownItem}>
        <Dropdown
          placeholder="Select Friend"
          fluid
          selection
          options={friendOptions}
          clearable
        />
      </Ref>
      <Button onClick={handleClick}>Reset</Button>
    </>
  );
};

export default DropdownExampleSelection;

Answer 1

我最接近的是通过 ref 单击“关闭”按钮：

import React, { createRef } from "react";
import { Dropdown, Ref, Button } from "semantic-ui-react";

const friendOptions = [
  {
    key: "Jenny Hess",
    text: "Jenny Hess",
    value: "Jenny Hess",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/jenny.jpg"
    }
  },
  {
    key: "Elliot Fu",
    text: "Elliot Fu",
    value: "Elliot Fu",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/elliot.jpg"
    }
  },
  {
    key: "Stevie Feliciano",
    text: "Stevie Feliciano",
    value: "Stevie Feliciano",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/stevie.jpg"
    }
  },
  {
    key: "Christian",
    text: "Christian",
    value: "Christian",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/christian.jpg"
    }
  },
  {
    key: "Matt",
    text: "Matt",
    value: "Matt",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/matt.jpg"
    }
  },
  {
    key: "Justen Kitsune",
    text: "Justen Kitsune",
    value: "Justen Kitsune",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/justen.jpg"
    }
  }
];

const DropdownExampleSelection = () => {
  var dropdownItem = createRef();

  const handleClick = e => {
    var element = dropdownItem.current.querySelector('[aria-selected="true"]');
    if (element) {
      dropdownItem.current.querySelector(".clear").click();
    }

    // dropdownItem.current.lastChild.firstChild.focus();
  };

  return (
    <>
      <Ref innerRef={dropdownItem}>
        <Dropdown
          placeholder="Select Friend"
          fluid
          selection
          options={friendOptions}
          clearable
          loading
        />
      </Ref>
      <Button onClick={handleClick}>Reset</Button>
    </>
  );
};

export default DropdownExampleSelection;

语义 UI React Uncontrolled Dropdown Clear

Semantic UI React Uncontrolled Dropdown Clear

reactjs

dropdown

semantic-ui-react