Reactjs 如何使用formik在react中编辑表单 var fname， 性别,， 城市=”； this.props.data.map（（行，索引）=>{ //控制台日志（索引）； if（this.props.selectedVal==索引）{ 性别=行[0]； fname=行[1]； 城市=世界其他地区[2]； } 返回[]； }); 返回( 编辑用户 重置 提交 ); }; render（）{ 返回( console.log（“值”+initialValues.name）} render={this.form} /> ); } }

在这里，我在单击特定行时从表中获取值。我使用formik在对话框中获取这些值。现在我想编辑这个formik表单。我面临一个问题。这些值不可编辑。如何编辑这些只读值。

---

我添加了我的代码沙盒链接

你做事的方式不正确。您正在使用的某些函数不存在

下面是代码的工作演示

---

请看一下代码，了解它是如何在两个组件之间转换的，如果您有任何疑问/理解代码时遇到困难，请随时询问我

感谢您的回复演示链接仅在输出中打开，我将使用此链接查看代码。请帮助我链接未在编辑代码中打开，我将在其中查看代码code@laxmi不客气。请进行投票并接受我的答案作为验证答案，以帮助其他人。在本例中，我有一个疑问，即个人值放在一个状态上，并使用道具获取值，但我的表中有50个字段所有这些值放在一个状态上。在这种情况下，我很难做什么。请给出如何获取和编辑这些值的建议使用antd和gatsby编辑这些值也面临同样的问题。我对获取这些值和更新这些值感到困惑

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