Блог

Я пытаюсь сделать это в первый раз. Сценарий заключается в том, что когда пользователь хочет отредактировать запись, нажав на кнопку «EditOutlinedIcon», откроется форма с текстовым полем с этой конкретной записью для редактирования. Как получить данные строки и отредактировать их в текстовом поле, которое присутствует в другом компоненте?

   <MUIDataTable
        title="Customer List"
        data={datatableData}
        columns={[
          "Name",
          "Role",
          "Email",
          "Status",
          {
            name: "Action",
            options: {
              customBodyRender: (value, tableMeta, updateValue,rowData) => {
                return (
                  <Grid container direction="row" justify="space-around">
                    <Tooltip title="">
                      <EditOutlinedIcon
                        color="primary"
                        onClick={() => {
                          history.push("account");
                          console.log(tableMeta.rowData);
                        }}
                      />
                    </Tooltip>
                  </Grid>
                );
              },
            },
          },
        ]}
        label="Action"
        options={{
          filterType: "checkbox",
        }}
      />
 

вот форма, в которой я хочу отредактировать данные:

 function UserAccount(){
const classes = useStyles();
const [value, setValue] = React.useState("user");
return (
  <div className={classes.root}>
    <Paper elevation={2}>
      <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
      >
        <Typography variant="h5" className={classes.title}>
          Account
        </Typography>
        <TextField
          defaultValue={value}
          variant="outlined"
          className={classes.textField}
        />
        <TextField
          defaultValue={value}
          variant="outlined"
          className={classes.textField}
        />        

        <Grid
          container
          direction="row"
          justify="space-around"
          alignItems="center"
          className={classes.button}
        >
          <Button variant="outlined" color="primary" size="small">
            Reset
          </Button>
          <Button
            variant="contained"
            size="small"
            className={classes.saveButton}
          >
            Save
          </Button>
        </Grid>
      </Grid>
    </Paper>
  </div>
);
}