在反应中选择一个值后如何关闭下拉菜单？

Question

我在我的 React 项目中使用了下拉菜单。当我选择一个值时，我想关闭它。但它不会自动关闭。我该怎么做？

Dropdown.js

import React from 'react';
import { PropTypes } from 'prop-types';
import { DropdownToggle, DropdownMenu, UncontrolledDropdown } from 'reactstrap';

import * as Icon from 'react-bootstrap-icons';

import './DropDown.scss';

/**
 * This is a reusable dropdown
 * onClick function and dropdown items come as props
 */
class DropDown extends React.Component {
  render() {
    const { dropDownItemArray, text, onClick } = this.props;
    const dropdownItems = dropDownItemArray.map((item,key) => {
      return (
        <div className="dropdown-items" onClick={onClick} >
          {item}
        </div>
      );
    });
    return (
      <div>
        <UncontrolledDropdown className="multi-select-wrapper text p4">
          <DropdownToggle className="select-dropdown">
            <div className="select-text text p4">{text}</div>
            <Icon.CaretDownFill />
          </DropdownToggle>
          <DropdownMenu name='test'>{dropdownItems}</DropdownMenu>
        </UncontrolledDropdown>
      </div>
    );
  }
}

DropDown.propTypes = {
  text: PropTypes.string,
  onClick: PropTypes.func,
  menuItemArray: PropTypes.array
};

export default DropDown;

这会处理输入字段中的所有输入值和下拉列表中的选定值。

handleChangeInputs = (event) => {
  if (event[0] === '<') {
    this.setState({
      editorHtml: event
    });
  } else {
    if (event.type === 'change') {
      this.setState({
        [event.target.name]: event.target.value
      });
    } else {
      if (event.target.parentNode.innerText[0] === 'C') {
        console.log(event);
        this.setState({
          ticketType: event.currentTarget.textContent
        });
      } else {
        console.log("test");
        this.setState({
          ticketPriority: event.currentTarget.textContent
        });
      }
    }
  }
};

这部分与下拉处理有关

if (event.target.parentNode.innerText[0] === 'C') {
  console.log(event);
  this.setState({
    ticketType: event.currentTarget.textContent
  });
} else {
  console.log("test");
  this.setState({
    ticketPriority: event.currentTarget.textContent
  });
}

Answer 1

• 您可以在 dropdownOpen 状态中添加一个 toggleDropdown 函数以及一个属性，这将导致下拉菜单打开或关闭：

toggleDropdown = () => {
    const dropdownOpen = this.state.dropdownOpen ? false : true;
    this.setState({ dropdownOpen: dropdownOpen})
};

• 在 props 中传递 toggleDropdown 和 dropdownOpen 并在代码中引用它们：

const { toggleDropdown, dropdownOpen } = this.props;
[...]
<UncontrolledDropdown
isOpen={dropdownOpen || false}
toggle={toggleDropdown}
>

• 您的代码引用了一个 onClick 函数，但您已将函数命名为 handleChangeInputs。这是一个可行的 onClick 函数。

onClick = (event) => {
this.setState({ ticketType: event.currentTarget.textContent }, () =>  this.toggleDropdown()}

在 onClick 中调用 toggleDropdown 似乎只有在 this.setState 的回调中才有效。