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

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

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

Answer 1

你做事的方式不对。您正在使用的某些功能根本不存在。

这是您的代码的工作演示 Codesandbox demo

请看一下代码并了解它是如何在两个组件之间转换的，如果您有任何 queries/get 无法理解代码，请随时问我。

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

how to edit a form in react using formik

reactjs

formik