Question

var fname,
  gender,
  city = "";

this.props.data.map((row, index) => {
  // console.log(index);
  if (this.props.selectedVal === index) {
    gender = row[0];
    fname = row[1];
    city = row[2];
  }
  return [];
});

return (
  <div>
    <Dialog
      open={this.props.open}
      onClose={this.handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <h1>Edit User</h1>
      <DialogContent>
        <DialogContentText id="alert-dialog-description" />
        <form onSubmit={handleSubmit}>
          <TextField
            type="text"
            margin="dense"
            id="firstname"
            label="Name"
            onChange={handleChange}
            value={fname}
            {...props}
          />

          <br />
          <TextField
            type="text"
            margin="dense"
            id="gender"
            label="gender"
            onChange={handleChange}
            value={gender}
            {...props}
          />

          <br />
          <TextField
            type="text"
            margin="dense"
            id="city"
            label="city"
            onChange={handleChange}
            value={city}
            {...props}
          />
        </form>
      </DialogContent>
      <DialogActions>
        <Button onClick={this.handleClose} color="primary">
          RESET
        </Button>
        <Button onClick={this.handleClose} color="primary" autoFocus>
          SUBMIT
        </Button>
      </DialogActions>
    </Dialog>
  </div>
);
};
render() {
return (
  <div align="center">
    <Formik
      initialValues={{
        name: this.props.fname,
        gender: this.props.gender,
        city: this.props.city
      }}
      onSubmit={initialValues => console.log("values" + initialValues.name)}
      render={this.form}
    />
  </div>
);
}
}

在这里我从表格中获取值，同时单击特定行以使用formik在对话框中获取这些值。现在我想编辑此formik表单我遇到了一个问题。这些值未编辑。如何编辑这些值只读值。我添加了我的codeandbox链接codesandbox

Answer 1

您做事的方式不正确。您正在使用的某些功能永远不会存在。

这是您的代码Codesandbox demo的有效演示

请看一下代码，了解它如何在两个组件之间转换，并随时问我是否有任何疑问/理解代码。

如何使用formik在React中编辑表单

1 个答案: