指示 id 以确认反应 js 中的操作时弹出错误

Question

我正在 React.JS

中开发应用程序

我需要显示一个弹出窗口来验证操作。

代码：

const App = () => {
  ...
  const body = () => {
    return (
      item &&
      item.map((elem, j) => {
        return (
          <tr key={elem.id}>
            <td>
              <span>{elem.cat}</span>
            </td>
            <td>
              <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                  <Modal.Title>Warning!</Modal.Title>
                </Modal.Header>
                <Modal.Body>Warning!</Modal.Body>
                <Modal.Footer>
                  <Button onClick={handleClose}>Cancel</Button>
                  <Button onClick={() => remove(elem.id)}>Delete</Button>
                </Modal.Footer>
              </Modal>
              <span onClick={handleShow}>
                <span>Delete</span>
              </span>
            </td>
          </tr>
        );
      })
    );
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>
              <span>Category</span>
            </th>
          </tr>
        </thead>
        <tbody>{body()}</tbody>
      </table>
    </div>
  );
};

碰巧弹出窗口按顺序使用 table 的最后一个 id，但我需要它是对应于该行的那个。

Answer 1

阅读此答案我已设法解决问题。

const [show, setShow] = useState(false);
const [selected, setSelected] = useState({});

const handleClose = () => setShow(false);
const handleShow = (selected) => {
  setSelected(selected);
  setShow(true);
  };

指示 id 以确认反应 js 中的操作时弹出错误

Error in popup when indicating an id to confirm an operation in recatjs

javascript

api

json

popup

reactjs