语义 UI 反应不受控制的下拉清除答案

【问题标题】：Semantic UI React Uncontrolled Dropdown Clear语义 UI 反应不受控制的下拉清除
【发布时间】：2020-07-16 01:13:27
【问题描述】：

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

我遇到的问题是我需要能够将下拉组件“清除”为空。有没有办法使用语义 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;

【问题讨论】：

对性能方面不太了解，但你试过<Form.Dropdown /> 除此之外，你所说的“清除下拉菜单”到底是什么意思——比如，你不想要更多的选项在下拉菜单中？
@kinoth 我希望将下拉列表的值重置为 null....不要清除所有选项。

标签： reactjs dropdown semantic-ui-react

【解决方案1】：

我最接近这个的是通过参考点击“关闭”按钮：

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;

【讨论】：