Question

我正在尝试实现带有许多项的弹出窗口，用户可以在其中多选它们。当用户单击某个项目时，将在右侧显示超棒的字体图标。

用户可以选择多个项目，并且右侧显示一个图标，表明已被选中。单击时此图标切换。我的问题是我的事件处理程序与所有项目绑定在一起，每当我单击一个项目时，所有项目都会被检查。

我是初次接触并做出反应的人。我也试图在数组中分配所选项目的ID。它不会追加。

const SettingsComponent = (props) => {
const urlStofTyper = stofTyperUrl; 
const stofTyper = [];
const [isPopoverOpen, setPopoverOpen] = useState(false);

const [isItemChecked, setItemChecked] = useState(false);

const [error, setError] = useState(null);
const [loading, setLoading] = useState(null);
const [stoftype, setStoftyper] = useState({ DataList: [] });

const toggle = () => setPopoverOpen(!isPopoverOpen);

const sectionClicked = (e) => {
setItemChecked(!isItemChecked);
let secId = e.target.parentNode.getAttribute("data-section");   
if (!isItemChecked) {
    stofTyper.push(secId);
   } else {
    stofTyper.filter((sec) => sec == secId);
  }
};

useEffect(() => {
fetchStoftyper({ setError, setLoading, setStoftyper });
}, []);

const fetchStoftyper = async ({ setError, setLoading, setStoftyper }) => {
try {
    setLoading(true);
    const response = await Axios(urlStofTyper);
    const allStofs = response.data;
    setLoading(false);
    setStoftyper(allStofs);
  } catch (error) {
    setLoading(false);
    setError(error);
  }
};

return (
<React.Fragment>
  <div className='list-header-icons__fontawesome-icon' id='PopoverClick'>
    <FontAwesomeIcon icon={faCog} />
  </div>
  <Popover
    isOpen={isPopoverOpen}
    placement='bottom'
    toggle={toggle}
    target='PopoverClick'>
    <PopoverHeader>formatter</PopoverHeader>
    <div className='popover-body'>
      <ul className='individual-col--my-dropdown-menu-settings'>
        {stoftype.DataList.map((item) => (
          <li key={item.Id} className='section-items'>
            <a
              onClick={sectionClicked}                 
              className='dropdown-item'                 

              data-section={item.Sections[0].SectionId}
              data-format={
                item.Formats.length > 0
                  ? item.Formats[0].FormatId
                  : ""
              }
              aria-selected='false'>
              <span className='formatter-name'>
                {item.Name}
              </span>
              {isItemChecked && (
                <span className='formatter-check-icon'>
                  <FontAwesomeIcon icon={faCheck} size='lg' />
                </span>
              )}
            </a>
          </li>
        ))}
      </ul>
    </div>
  </Popover>
</React.Fragment>
);

Answer 1

现在，您正在使用一个布尔变量来检查是否应显示图标，因为DataList中的每个项目都应具有其自己的单独指示器，因此该图标将不起作用。

一种可能的解决方案是为此目的使用new Map()并将item.id与as和index和true/false作为值存储，因此您选择的状态将如下所示：< / p>

Map(3) {1 => true, 2 => true, 3 => false}

之后，您可以检查是否应按如下所示显示图标：

!!selected.get(item.id)

如果HashTable中的值为true，则返回true；如果为false或根本不存在，则返回false。这应该足以实现您要求的功能。

对于实际示例，您可以检查flatlist-selectable section from official Facebook docs，它们显示了如何使用此技术实现多重选择。希望对您有所帮助。

Answer 2

最后，对于我自己的问题，我有一个解决方案。即使我不需要上面的解决方案，但尝试解决它也是一个好习惯。 Popover无关紧要，因为它仅用作包装器。下面的解决方案仍然可以放在Popover中。

CodeSandBox链接：Demo here使用Class组件，我将尝试尽快使用钩子对此进行重写。

此解决方案依赖项是Bootstrap 4和Fontawesome。

import React, { Component } from "react";
import Cars from "./DataSeed";

class DropDownWithSelect extends Component {
  constructor(props) {
    super(props);

    this.toggleDropdown = this.toggleDropdown.bind(this);

    this.state = {
      isDropDownOpen: false,
      idsOfItemClicked: []
    };
  }

  toggleDropdown = evt => {
    this.setState({
      isDropDownOpen: !this.state.isDropDownOpen
    });
  };

  toggleItemClicked = id => {
    this.setState(state => {
      const idsOfItemClicked = state.idsOfItemClicked.includes(id)
        ? state.idsOfItemClicked.filter(x => x !== id)
        : [...state.idsOfItemClicked, id];

      return {
        idsOfItemClicked
      };
    });
  };

  render() {
    return (
      <div className="dropdown">
        <button
          onClick={this.toggleDropdown}
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Dropdown button
        </button>
        {this.state.isDropDownOpen && (
          <div
            className="dropdown-menu show"
            aria-labelledby="dropdownMenuButton"
          >
            {Cars.map(x => {
              return (
                <div
                  key={x.id}
                  onClick={() => this.toggleItemClicked(x.id)}
                  className="dropdown-item d-inline-flex justify-content-between"
                >
                  <span className="d-flex"> {x.name} </span>
                  <span className="d-flex align-self-center">
                    {this.state.idsOfItemClicked.includes(x.id) && (
                      <i className="fa fa-times" aria-hidden="true" />
                    )}
                  </span>
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }
}
export default DropDownWithSelect;

数据，即./DataSeed

    const cars = [
  {
    id: 1,
    name: "BMW",
    cost: 450000
  },
  {
    id: 2,
    name: "Audi",
    cost: 430000
  },
  {
    id: 3,
    name: "Mercedes",
    cost: 430000
  }
];

export default cars;

React Hook选择带有图标的多个项目

2 个答案: