Question

有没有办法防止下拉菜单在选择项目时反应引导程序关闭？我创建了这个在我的项目中多次使用的组件，但是当 props.name 为 trans('Tło') 时，我需要在选择时保持下拉菜单打开，我该如何实现？

export const DropdownList = ({
  name,
  currentValue,
  items,
  action,
  displayValue = (i, className) => <span className={className}>{i.name.pl}</span>,
  getItemId = i => i.id,
  getKey = i => `${name}-${i.id || i}`,
  displayCurrentValue = displayValue,
}) => {
  const handleAction = i => {
    if (name !== trans('Tło')) {
      action(i);
    }
  };

  return (
    <Dropdown>
      <Dropdown.Toggle variant="none" className={`w-100 ${styles.toggle}`}>
        <div className="row mx-auto d-flex flex-nowrap">
          <div className="col px-0 d-flex flex-column align-items-baseline">
            <div style={{ fontSize: '12px', color: '#878787' }}>{name}</div>
            <div className={`${styles.item} font-weight-bold text-left`}>
              {currentValue ? displayCurrentValue(currentValue, 'w-50') : trans('Wybierz')}
            </div>
          </div>
          <div className="col-auto px-0 d-flex align-items-center">
            <img src={arrowDownIcon} alt="" style={{ width: '12px' }} />
          </div>
        </div>
      </Dropdown.Toggle>
      <Dropdown.Menu align="left" style={{ minWidth: '100%' }}>
        {items.map(i => (
          <div
            key={getKey(i)}
            className={currentValue && getItemId(currentValue) === getItemId(i) ? styles.active : ''}
          >
            <Dropdown.Item
              onSelect={e => handleAction(i)}
              className={`current-item ${name === trans('Tło') && styles.noHover}`}
            >
              {displayValue(i, 'w-100')}
            </Dropdown.Item>
          </div>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

Answer 1

您可以使用 show 属性控制下拉菜单是否打开的状态：

const { Dropdown } = ReactBootstrap;
const { useState } = React;

function App() {
  const [show, setShow] = useState(false);

  return (
    <Dropdown
      show={show}
      onToggle={(isOpen, event, metadata) => {
        if (metadata.source !== "select") {
          setShow(isOpen);
        }
      }}
    >
      <Dropdown.Toggle>foo</Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item onSelect={() => setShow(false)}>bar</Dropdown.Item>
        <Dropdown.Item>baz</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<!-- react -->
<script
  crossorigin
  src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<!-- react-bootstrap -->
<script
  crossorigin
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
></script>
<!-- bootstrap -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>

<div id="root"></div>

在上面的例子中：

选择 bar 时，show 设置为 false，下拉菜单关闭。
选择 baz 时，我们不会更改 show，因此下拉列表不会关闭。
当下拉菜单因除选择之外的任何原因而切换时，我们将 show 设置为组件想要切换到的任何内容。这允许下拉菜单正常打开和关闭。

React bootstrap 防止下拉菜单在下拉项目选择时关闭

1 个答案: