通过单击按钮获取详细信息答案

【问题标题】：Getting detail with the click of a button通过单击按钮获取详细信息
【发布时间】：2021-09-18 21:08:20
【问题描述】：

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

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;

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

【问题讨论】：

标签： javascript reactjs filter onclick react-bootstrap

【解决方案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>

【讨论】：