如何将 table 值发送到稍后将在 React 中可见的另一个组件？

Question

我在 table（每行）到 edit/delete 对应的行上有一个 table 和 edit/delete 按钮。

我想在单击编辑时打开一个弹出窗口，但我想打开带有一些参数的弹出窗口以显示“旧值、新值”等。

这是我的 table 代码，我在底部放置了一个 EditUserPopup 组件。

  function MainPanel(props) {
    
      const [isEditPopupOpen, setEditPopup] = useState(true);
    
    
      const deleteCustomer = async (id) => {
        await service.deleteCustomerById(id);
        props.refreshTableParam();
      }
    
      const editCustomer = async (id, name, surname) => {
        setEditPopup(true);
//WHAT I NEED HERE ?
        props.refreshTableParam();
        
    
      }
    
      return (
        <>
          <ReactBootStrap.Table striped bordered hover>
            <thead>
              <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Edit</th>
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
              {props.param &&
                props.param.map((item) => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.firstName}</td>
                    <td>{item.lastName}</td>
                    <td><Button className='editButton' onClick={() => editCustomer(item.id, item.firstName, item.lastName)}><FontAwesomeIcon icon={faUserEdit} /></Button></td>
                    <td><Button className='deleteButton' onClick={() => deleteCustomer(item.id)}><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
                  </tr>
                ))}
            </tbody>
          </ReactBootStrap.Table>
          {
//HOW TO OPEN THAT COMPONENT WITH PARAMS
            isEditPopupOpen && <EditUserPopup someParamHere={null}/>
          }
    
    
        </>
      );
    }

我正在通过 table 上的按钮调用 editCustomer() 函数，我正在考虑使用某些参数使 EditPopup 以某种方式可见，并且在其他组件（弹出窗口本身）中我会做一些逻辑。

但我无法访问弹出窗口中的 id、firstName、lastName 值。如何将相应的 table 行值发送到弹出窗口？

页面是这样的：

Answer 1

您可以创建反应状态并在编辑函数中设置它们。然后你应该将它们作为道具发送到你的弹出窗口。

 function MainPanel(props) {
    
      const [isEditPopupOpen, setEditPopup] = useState(true);
      const [customerInfo, setCustomerInfo] = useState({id: '', name: '', surname: ''})
    
    
      const deleteCustomer = async (id) => {
        await service.deleteCustomerById(id);
        props.refreshTableParam();
      }
    
      const editCustomer = async (id, name, surname) => {
        setCustomerInfo({id: id, name: name, surname: surname})
        setEditPopup(true);
//WHAT I NEED HERE ?
        props.refreshTableParam();
        
    
      }
    
      return (
        <>
          <ReactBootStrap.Table striped bordered hover>
            <thead>
              <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Edit</th>
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
              {props.param &&
                props.param.map((item) => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.firstName}</td>
                    <td>{item.lastName}</td>
                    <td><Button className='editButton' onClick={() => editCustomer(item.id, item.firstName, item.lastName)}><FontAwesomeIcon icon={faUserEdit} /></Button></td>
                    <td><Button className='deleteButton' onClick={() => deleteCustomer(item.id)}><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
                  </tr>
                ))}
            </tbody>
          </ReactBootStrap.Table>
          {
//HOW TO OPEN THAT COMPONENT WITH PARAMS
            isEditPopupOpen && <EditUserPopup customerInfo={customerInfo} someParamHere={null}/>
          }
    
    
        </>
      );
    }

如何将 table 值发送到稍后将在 React 中可见的另一个组件？

How to send table values to another component which will be visible later in React?

javascript

reactjs

typescript

react-redux

react-hooks