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

我有一个显示表格的组件，其中一列有一个字段

Actions

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

我已经通过传入onClick从它的行中获取了当前数据。我试图使用另一个组件的状态进行渲染，但没有成功。我使用语义UI组件来显示带有动画的按钮

这是包含该表的代码

const MainContent=（）=>{
const[actions，setActions]=useState（false）；
const handleView=（行数据）=>{
console.log（rowData）；
设置动作（真）；
if（actions==true）返回；
};
....
....
常量内容=（项目、索引）=>{
退货项目。是否退货(
{item.appName}
{item.createdTs}
{item.pattern}
handleView（项目）}>
看法
{item.routeChildEntry.map（routeContents）}
) : (
....
....
....
);
};
返回(
....
{加载(
AppName
家长应用程序
创建日期
请求路径
响应代码
响应内容类型
响应延迟
行动
{data.map（（路由，索引）=>{
返回路线图（目录、索引）；
})}
) : (
....
....
)}
);
};
导出默认主内容；

下面是单击按钮时要渲染的组件

从“React”导入React；
从“reactjs弹出窗口”导入弹出窗口；
从“语义ui反应”导入{Icon}；
常量父项=（道具）=>{
返回(
父母
);
};
导出默认父对象；

---

如何渲染其他组件并在单击按钮时向其传递数据？

数据可以作为道具传递给其他组件

例如，如果您的组件是

，并且您要传递的数据包含在变量

rowData

中，则可以通过以下方式传递：

<ParentView dataPassedByAkhil = {rowData}/>

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

export default function ParentView(props) {

console.log(props.dataPassedByAkhil);

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

<PopupComponent open={stateSetForPopupByParent}/>

更新了上面的链接，介绍了如何从按钮行向对话框传递数据

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>
  );
}

以下是完整的代码：
导出默认函数FormDialog（）{
const[open，setOpen]=React.useState（false）；
const[valueofRow，setValueOfRow]=React.useState（）；
常量handleClickOpen=（值）=>{
setValueOfRow（值）；
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
{
handleClickOpen（“约翰”）；
}}
>
第1行-值为John




{
handleClickOpen（“Sally”）；
}}
>
第2行的值是Sally
编辑
使用状态触发的对话框
已单击{valueofRow}并从该行传递
取消
提交
);
}

你能给我举个例子说明如何设置打开和关闭pop的状态吗？它使用'const[open，setOpen]`hook来设置

打开的状态。请参见第27行组件中的
open={open}
，该组件告诉您弹出窗口是否应该打开谢谢，非常感谢@Kal！我在onClick上看到了对话。但是如何从表中传递特定行中的数据呢。每个表行都有图标，我需要将行数据传递到此对话框，以便显示一些高级信息。因此，现在我删除了另一个组件
ParentView
。我将只放有对话框的代码。更新了上面答案中的链接，介绍了如何将数据从一排按钮传递到对话框谢谢@Kale的帮助！
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>
  );
}