如何从 table 行传递数据并在呈现时将其传递给另一个组件？

Question

我有一个显示 table 的组件，其中一列有一个字段 Actions，其中有按钮（查看、编辑、删除等）。单击按钮时，我需要呈现另一个组件（组件是一个弹出窗口）并从 table 传递数据，以便它以某种形式显示数据，我需要进一步添加。

我已经通过传入 onClick 设法从它的行中获取了当前数据。我尝试使用 state 来渲染另一个组件，但没有成功。我正在使用 Semantic-UI React 组件来显示带有动画的按钮。

这是包含 table、

的代码

const MainContent = () => {
  const [actions, setActions] = useState(false);
 
  const handleView = (rowData) => {
    console.log(rowData);
    setActions(true);
    if (actions == true) return <ParentView />;
  };

  ....
  ....

  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Button animated onClick={() => handleView(item)}>
              <Button.Content visible>View</Button.Content>
              <Button.Content hidden>
                <Icon name="eye" />
              </Button.Content>
            </Button>
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      ....
      ....
      ....
    );
  };

  return (
    <div>
     
      ....
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    ....
                    ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

下面是点击按钮时呈现的组件，

import React from "react";
import Popup from "reactjs-popup";
import { Icon } from "semantic-ui-react";

const Parent = (props) => {
  return (
    <Popup trigger={<Icon link name="eye" />} modal closeOnDocumentClick>
      <h4>in parent</h4>
    </Popup>
  );
};

export default Parent;

如何渲染另一个组件并在单击按钮时将数据传递给它？

Answer 1

数据可以作为 props 传递给其他组件。

例如，如果您的组件是<ParentView />，并且您传递的数据包含在变量rowData中，您可以将其传递为：

<ParentView dataPassedByAkhil = {rowData}/>

然后在你的ParentView组件中，

export default function ParentView({dataPassedByAkhil}) {

console.log(dataPassedByAkhil);

或者，您可以接受数据作为道具，如下所示

export default function ParentView(props) {

console.log(props.dataPassedByAkhil);

如果你想打开和关闭另一个弹出窗口，你可以像上面一样传递一个状态。

<PopupComponent open={stateSetForPopupByParent}/>

Example of popup using state.

更新了上面的 link，说明了如何将数据从按钮行传递到对话框

Here is the full code:

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [valueofRow, setValueOfRow] = React.useState();

  const handleClickOpen = (value) => {
    setValueOfRow(value);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("John");
        }}
      >
        Row 1 - value is John
      </Button>
      <br />
      <br />
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("Sally");
        }}
      >
        Row 2 Value is Sally
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="edit-apartment"
      >
        <DialogTitle id="edit-apartment">Edit</DialogTitle>
        <DialogContent>
          <DialogContentText>Dialog fired using state</DialogContentText>
          <h1>{valueofRow} was clicked and passed from the row</h1>
          <TextField
            autoFocus
            margin="dense"
            id="field"
            label="some field"
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="secondary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

如何从 table 行传递数据并在呈现时将其传递给另一个组件？

How to pass data from a table row and pass it to another component when it renders?

javascript

reactjs

bootstrap-table

semantic-ui-react