React中使用Formik编辑表单时无法修改值的问题求助

我看了你的代码，问题出在没有正确把Formik的状态和表单控件绑定，而且一些变量的使用方式也不符合React+Formik的规范，导致输入框变成了只读状态。下面是修复后的完整代码，以及关键修改点的说明：

修复后的代码 #

class EditUserDialog extends React.Component {
  handleClose = () => {
    this.props.onClose();
  };

  // 重构表单渲染方法，接收Formik提供的核心props
  form = ({ values, handleChange, handleSubmit }) => {
    // 根据选中索引获取对应行数据，替代原来的全局变量逻辑
    const selectedRow = this.props.data.find((_, index) => index === this.props.selectedVal);
    if (!selectedRow) return <div>Loading...</div>;

    return (
      <div>
        <Dialog 
          open={this.props.open} 
          onClose={this.handleClose} 
          aria-labelledby="alert-dialog-title" 
          aria-describedby="alert-dialog-description"
        >
          <h1 id="alert-dialog-title">Edit User</h1>
          <DialogContent>
            <DialogContentText id="alert-dialog-description" />
            <form id="edit-form" onSubmit={handleSubmit}>
              {/* 绑定Formik的values和handleChange，同步表单状态 */}
              <TextField
                type="text"
                margin="dense"
                id="firstname"
                label="Name"
                onChange={handleChange}
                value={values.name}
                name="name" // 必须设置name，和Formik初始值的key对应
              />
              <br />
              <TextField
                type="text"
                margin="dense"
                id="gender"
                label="Gender"
                onChange={handleChange}
                value={values.gender}
                name="gender"
              />
              <br />
              <TextField
                type="text"
                margin="dense"
                id="city"
                label="City"
                onChange={handleChange}
                value={values.city}
                name="city"
              />
            </form>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              RESET
            </Button>
            <Button type="submit" form="edit-form" color="primary" autoFocus>
              SUBMIT
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  };

  render() {
    // 动态生成Formik初始值，从选中行获取数据
    const selectedRow = this.props.data.find((_, index) => index === this.props.selectedVal);
    const initialValues = selectedRow 
      ? { name: selectedRow[1], gender: selectedRow[0], city: selectedRow[2] }
      : { name: "", gender: "", city: "" };

    return (
      <div align="center">
        <Formik
          initialValues={initialValues}
          onSubmit={(values) => {
            console.log("Submitted values:", values);
            this.handleClose(); // 提交完成后关闭弹窗
          }}
          render={this.form}
        />
      </div>
    );
  }
}

关键修改点说明 #

• 移除全局变量：原来的var fname, gender, city不是React响应式状态，Formik无法跟踪它们的变化，改用Formik内置的values状态统一管理表单数据。
• 传递Formik核心props：让form方法接收Formik提供的values、handleChange、handleSubmit，这些是Formik管理表单状态的核心工具，必须用来绑定表单控件。
• 设置name属性：每个TextField必须设置name，且和Formik初始值的key一一对应（比如name="name"对应初始值里的name），这样handleChange才能正确更新对应字段的状态。
• 动态初始化表单值：在render阶段根据选中的行索引获取对应数据，生成Formik的初始值，确保弹窗打开时能正确加载选中行的信息。
• 修复提交逻辑：把SUBMIT按钮改成type="submit"并关联表单ID，这样才能触发Formik的onSubmit方法，拿到最新的表单数据。

这样修改后，表单就能正常编辑，Formik也会正确跟踪所有输入变化，提交时能获取到最新的用户编辑数据。

内容的提问来源于stack exchange，提问作者laxmi