单击按钮获取详细信息

Question

我正在练习反应，我试图在单击旁边的按钮时获取项目的名称和类别。我使用 map 方法将所有数组对象呈现为 react-bootstrap table 并且每个项目旁边都有一个按钮。我已经尝试过过滤方法，但我无法真正完成它。下面是我的代码：

const ModalPractice = () => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const food = [
    {
      id: 1,
      name: 'rice',
      category: 'grain',
      image: 'images/rice.jpg',
    },
    {
      id: 2,
      name: 'beans',
      category: 'grain and protein',
      image: 'images/beans.jpg',
    },
    {
      id: 3,
      name: 'amala',
      category: 'swallow',
      image: 'images/amala.jpg',
    },
    {
      id: 4,
      name: 'Oat',
      category: 'cereals',
      image: 'images/oat.jpg',
    },
    {
      id: 5,
      name: 'coke',
      category: 'soft drink',
      image: 'images/coke.jpg',
    },
    {
      id: 6,
      name: 'banana',
      category: 'fruit',
      image: 'images/banana.jpg',
    },
    {
      id: 7,
      name: 'okra',
      category: 'vegetable',
      image: 'images/okra.jpg',
    },
    {
      id: 8,
      name: 'yam',
      category: 'tuber',
      image: 'images/yam.jpg',
    },
    {
      id: 9,
      name: 'palm oil',
      category: 'fat',
      image: 'images/palmoil.jpg',
    },
    {
      id: 10,
      name: 'orange',
      category: 'fruit',
      image: 'images/orange.jpg',
    },
  ];

  return (
    <div>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{food.map((list) => list.name)}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{food.map((list) => list.category)}</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary' onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Food Name</th>
            <th>Food Category</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          {food.map((list) => (
            <tr className='align-middle' key={list.id}>
              <td>{list.id}</td>
              <td>{list.name}</td>
              <td>{list.category}</td>
              <td>
                <img alt='' src={list.image} width='100' height='100' />
              </td>
              <td>
                <Button variant='primary' onClick={handleShow}>
                  Detail
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default ModalPractice;

我希望能够获得相应类别的食物名称。

Answer 1

您可以在组件中添加一个新状态，将选定的食物项存储在其中并在模态中显示，而不是过滤整个数组。一旦模式关闭，您就可以清除状态。

const [selectedItem, setSelectedItem] = useState({});

你可以像下面这样更新 handleClose 和 handleShow 方法在 handleClose 方法中，我们可以将 selectedItem 状态清除为空对象。

 const handleClose = () => {
   setShow(false);
   setSelectedItem({})
}

在handleShow方法中，我们可以将选中的item赋值给selectedItem状态

const handleShow = (e, item) => {
   setShow(true);
   setSelectedItem(item)
}

之后请更新点击方法以传递所选列表，如

<Button variant='primary' onClick={e => handleShow(e, list)}>
   Detail
 </Button>

还请更新模态代码以显示 selectedItem 状态下的名称和类别。

<Modal show={show} onHide={handleClose}>
    <Modal.Header closeButton>
      <Modal.Title>{selectedItem.name)}</Modal.Title>
    </Modal.Header>
    <Modal.Body>{selectedItem.category)}</Modal.Body>
    <Modal.Footer>
      <Button variant='secondary' onClick={handleClose}>
        Close
      </Button>
      <Button variant='primary' onClick={handleClose}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>

单击按钮获取详细信息

Getting detail with the click of a button

javascript

onclick

filter

reactjs

react-bootstrap