Нестандартное раскрывающееся меню реагирования не открывается

Question

В настоящее время у меня есть 3 строки в таблице. В каждой строке два столбца: имя файла и кнопка

• имя файла - просто фиктивная ссылка. Кнопка

• скроет, чтобы отобразить меню.

Мои требования следующие:

• Нажмите кнопку, и она переключит меню. то есть, если предыдущий он близок, он должен быть открытым. Если prev открыт, закройте.
• Когда вы нажимаете на эту кнопку, если открыты другие меню, они должны быть закрыты.
• Каждый раз, когда открыто только 1 меню.

github link

git clone, npm install, npm start

У меня следующий код

import React, {useState, useEffect} from 'react';

function Menu({buttonName, menuIndex, currRowInd, setCurrRowInd}) {
  // inside menu
  const [open, setOpen] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const menuItems = {download: 'download', view: 'view', delete: 'delete'};

  useEffect(() => {
    if (open && menuIndex === currRowInd) {
      setShowMenu(true);
    } else {
      setShowMenu(false);
    }
  }, [open, currRowInd]);

  return (
    <div>
      <button
        onClick={event => {
          // it is mouse click
          if (event.pageX !== 0 && event.pageY !== 0) {
            // toggle
            setOpen(!open);
            setCurrRowInd(menuIndex);
          }
        }}
      >
        {buttonName}
      </button>
      {showMenu && (
        <ul style={{padding: '5px', margin: '10px', border: '1px solid #ccc'}}>
          {Object.keys(menuItems).map((item, itemIndex) => {
            return (
              <li
                tabIndex="0"
                key={itemIndex}
                style={{
                  listStyle: 'none',
                  padding: '5px',
                  backgroundColor: 'blue'
                }}
              >
                {item}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

function TableElement() {
  const [currRowInd, setCurrRowInd] = useState('');

  const items = [
    {
      file: 'file1',
      button: 'button1'
    },
    {
      file: 'file2',
      button: 'button2'
    },
    {
      file: 'file3',
      button: 'button3'
    }
  ];
  return (
    <table style={{borderCollapse: 'collapse', border: '1px solid black'}}>
      <tbody>
        {items.map((item, index) => {
          return (
            <tr key={index}>
              <td style={{border: '1px solid black'}}>
                <a href="#">{item.file}</a>
              </td>
              <td style={{border: '1px solid black'}}>
                <Menu
                  buttonName={item.button}
                  menuIndex={index}
                  currRowInd={currRowInd}
                  setCurrRowInd={setCurrRowInd}
                />
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  return (
    <>
      <TableElement />
    </>
  );
}

export default App;

У меня ошибка:

1. Нажмите кнопку 1, откроется 1-е меню (хорошо)
2. Нажмите кнопку 2, откроется 2-е меню и закроется 1-е меню (хорошо)
3. Нажмите кнопку 1 еще раз, 2-е меню закрыто (пока хорошо), но 1-е меню не открыто.

Есть идеи?

Answer 1

Как уже упоминалось, вы можете значительно упростить код. Поскольку для каждой таблицы должно быть видно только одно меню, видимость должна обрабатываться для TableElement компонента.

import React, { useState } from 'react';

const Menu = ({
  buttonName,
  menuIndex,
  opened,
  handleClickButton
}) => {

  const menuItems = {
    download: 'download',
    view: 'view',
    delete: 'delete'
  };

  return (
    <div>
      <button onClick={(e) => handleClickButton(menuIndex, e)}>
        {buttonName}
      </button>

      {opened && (
        <ul style={{padding: '5px', margin: '10px', border: '1px solid #ccc'}}>
          {Object.keys(menuItems).map((item, itemIndex) => {
            return (
              <li
                tabIndex="0"
                key={itemIndex}
                style={{
                  listStyle: 'none',
                  padding: '5px',
                  backgroundColor: 'blue'
                }}
              >
                {item}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

const TableElement = _ => {
  const [currRowInd, setCurrRowInd] = useState(null);

  const items = [
    {
      file: 'file1',
      button: 'button1'
    },
    {
      file: 'file2',
      button: 'button2'
    },
    {
      file: 'file3',
      button: 'button3'
    }
  ];

  const handleButtonClick = (menuIndex, e) => {
    setCurrRowInd(menuIndex);
  }

  return (
    <table style={{borderCollapse: 'collapse', border: '1px solid black'}}>
      <tbody>
        {items.map((item, index) => {
          return (
            <tr key={index}>
              <td style={{border: '1px solid black'}}>
                <a href="#">{item.file}</a>
              </td>
              <td style={{border: '1px solid black'}}>
                <Menu
                  buttonName={item.button}
                  menuIndex={index}
                  opened={currRowInd === index}
                  handleClickButton={handleButtonClick}
                />
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

const App = _ => {
  return (
    <>
      <TableElement />
    </>
  );
}

export default App;

Answer 2

Вам не нужно все это состояние в компоненте Menu, оно просто добавляет много сложности. Ваша проблема решается простым удалением и заменой некоторых реквизитов.

Ссылка на рабочие коды и поле

function Menu({buttonName, showMenu, handleClick}) {
  const menuItems = {download: 'download', view: 'view', delete: 'delete'};

  return (
    <div>
      <button
        onClick={event => {
          // it is mouse click
          if (event.pageX !== 0 && event.pageY !== 0) {
            // toggle
            handleClick();
          }
        }}
      >
        {buttonName}
      </button>
      {showMenu && (
        <ul style={{padding: '5px', margin: '10px', border: '1px solid #ccc'}}>
          {Object.keys(menuItems).map((item, itemIndex) => {
            return (
              <li
                tabIndex="0"
                key={itemIndex}
                style={{
                  listStyle: 'none',
                  padding: '5px',
                  backgroundColor: 'blue'
                }}
              >
                {item}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

function TableElement() {
  // number is a better default. -1 will never match
  const [currRowInd, setCurrRowInd] = useState(-1);

  const items = [
    {
      file: 'file1',
      button: 'button1'
    },
    {
      file: 'file2',
      button: 'button2'
    },
    {
      file: 'file3',
      button: 'button3'
    }
  ];
  return (
    <table style={{borderCollapse: 'collapse', border: '1px solid black'}}>
      <tbody>
        {items.map((item, index) => {
          return (
            <tr key={index}>
              <td style={{border: '1px solid black'}}>
                <a href="#">{item.file}</a>
              </td>
              <td style={{border: '1px solid black'}}>
                <Menu
                  buttonName={item.button}
                  showMenu={index === currRowInd}
                  handleClick={() => {
                    // toggle
                    if (index !== currRowInd) setCurrRowInd(index)
                    else setCurrRowInd(-1)
                  }}
                />
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}