单击按钮一次显示一个列表

Question

我有一个网页，我在其中使用 React JS table 显示记录列表，每一行都有一个按钮向用户显示操作列表 item.If 用户单击一行中的一个按钮并单击另一行中的另一个按钮之前的列表应该隐藏但是两个列表都是 displaying.How 来解决这个问题？

const dataset = [
{"id" : 1, "buttons" : (<ActionItemList />)},
{"id" : 2, "buttons" : (<ActionItemList />)}
]

<ReactTable data={dataset}  />

const ActionItemList = () => {
   return (
       <div>
          <button>...</button>
        </div>
        <div>
           <ul>
              <li>action-item1</li>
              <li>action-item2</li>
              <li>action-item3</li>
           </ul>
        />
        </div>
      </div>
)
}

Answer 1

如果可以使用挂钩，则可以让菜单使用包装器传递的方法设置 openId。以下是如何执行此操作的示例：

import React, { useState, memo, useMemo } from 'react';
import ReactTable from 'react-table';
//make ActionItemList a pure component using React.memo
const ActionItemList = memo(
  ({ isOpen, setOpenId, id }) =>
    console.log('in render', id) || (
      <button
        onClick={() =>
          isOpen ? setOpenId() : setOpenId(id)
        }
      >
        {isOpen ? 'Close' : 'Open'} Menu
      </button>
    )
);
const dataset = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
];
const columns = [
  { id: 1, accessor: 'id' },
  {
    id: 2,
    //if accessor is a function table will render what function returns
    //  passing in the data where we added isOpen and setOpenId
    accessor: ({ Menu, ...props }) => (
      //passing in the needed props to pure component Menu
      <Menu {...props} />
    ),
  },
];
//wrap this on your react table, adding isOpen and setOpenId
export default () => {
  //set state for open id
  const [openId, setOpenId] = useState();
  //memoize creating the data prop based on openId changing
  const dataWithProps = useMemo(
    () =>
      dataset.map(item => ({
        ...item,
        isOpen: item.id === openId,
        setOpenId,
        Menu: ActionItemList,
      })),
    [openId]
  );
  //return the react table with the extra props in data
  return (
    <ReactTable data={dataWithProps} columns={columns} />
  );
};

单击按钮一次显示一个列表

Displaying one List at a time on Clicking button

javascript

ref

reactjs