我的表格不起作用当我点击保存按钮时，我的表格是空白的，没有字段输入我的取消按钮没有清除字段

如何解决我的表格不起作用当我点击保存按钮时，我的表格是空白的，没有字段输入我的取消按钮没有清除字段

我正在使用 React、Formik 和 Yup 制作表单。

我的表单不起作用。当我点击保存按钮时，我的输入没有保存我在字段中输入的信息。它在表格上保存空白信息。

而且我的取消按钮没有清除字段。当我点击取消按钮时，没有任何反应。需要你的帮助，伙计们！谢谢。

import React,{ Component } from 'react';
import Main from '../template/Main';
import axios from 'axios';
import { Helmet } from 'react-helmet';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';
import { BASE_URL } from './Url.json';
import { Formik,ErrorMessage,Form,Field } from 'formik';
import * as Yup from 'yup';

const initialState = {
  member: { avatar: '',name: '',email: '',project: '',devices: '',mainstack: '' },list: [],};
export default class MemberCrud extends Component {
  constructor(props) {
    super(props);
    this.state = { ...initialState };
    //this.validateField = this.validateField.bind(this)
  }

  componentwillMount() {
    axios(BASE_URL).then((resp) => {
      this.setState({ list: resp.data });
    });
  }

  clear() {
    this.setState({ member: initialState.member });
  }

  save() {
    const member = this.state.member;
    const method = member.id ? 'put' : 'post';
    const url = member.id ? `${BASE_URL}/${member.id}` : BASE_URL;
    axios[method](url,member).then((resp) => {
      const list = this.getUpdatedList(resp.data);
      this.setState({ member: initialState.member,list });
    });
  }

  getUpdatedList(member) {
    const list = this.state.list.filter((u) => u.id !== member.id);
    list.unshift(member);
    return list;
  }

  updateField(event,field) {
    const member = this.state.member;
    member[field] = event.target.value;
    this.setState({ member });
  }

  renderInput(title,value,onChange,/*validateField,*/ placeholder,formik = {}) {
    return (
      <div className="col-12 col-md-4">
        <div className="form-groud">
          <label>{title}</label>
        </div>
        <div className="form-row">
          <Field
            type={placeholder}
            name={placeholder}
            id={placeholder}
            placeholder={placeholder}
            //   className={formik.errors[placeholder] && formik.touched[placeholder] ? "input-error" : null}
          />
          <ErrorMessage name={placeholder} component="span" className="error" />
        </div>
      </div>
    );
  }

  renderForm() {
    const formSchema = Yup.object().shape({
      avatar: Yup.string().required('required'),name: Yup.string().required('required'),email: Yup.string().required('required'),project: Yup.string().required('required'),devices: Yup.string().required('required'),mainstack: Yup.string().required('required'),});

    const initialState = {
      member: { avatar: '',};

    return (
      <Formik
        initialValues={initialState.member}
        validationSchema={formSchema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {(formik) => {
          return (
            <Form>
              <div className="row" updateField={this.updateField}>
                {this.renderInput(
                  'Avatar',this.state.member.avatar,(e) => this.updateField(e,'avatar'),/*this.validateField,*/ 'avatar',)}
                {this.renderInput(
                  'Name',this.state.member.name,'name'),*/ 'name',)}
                {this.renderInput(
                  'Email',this.state.member.email,'email'),*/ 'email',)}
                {this.renderInput(
                  'Project',this.state.member.project,'project'),*/ 'project',)}
                {this.renderInput(
                  'Devices',this.state.member.devices,'devices'),*/ 'devices',)}
                {this.renderInput(
                  'MainStack',this.state.member.mainstack,'mainstack'),*/ 'mainstack',)}
              </div>

              <hr />
              <div className="row">
                <div className="col-12 d-flex justify-content-end">
                  <button
                    type="submit"
                    className={!(formik.dirty && formik.isValid) ? 'disabled-btn' : 'btn btn-primary'}
                    disabled={!(formik.dirty && formik.isValid)}
                    onClick={(e) => this.save(e)}
                  >
                    Save
                  </button>
                  <button
                    type="button"
                    className="btn btn-secondary ml-2"
                    onClick={(e) => this.clear(e)}
                    /*disabled={!(formik.dirty && formik.isValid)}*/
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </Form>
          );
        }}
      </Formik>
    );
  }

  load(member) {
    this.setState({ member });
  }

  remove(member) {
    axios.delete(`${BASE_URL}/${member.id}`).then((resp) => {
      const list = this.state.list.filter((u) => u !== member);
      this.setState({ list });
    });
  }

  confirmRemove(member) {
    confirmAlert({
      message: 'Are you sure ?',buttons: [
        {
          label: 'Yes',onClick: () => this.remove(member),},{
          label: 'No',],});
  }

  renderTable() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Profile Pictute</th>
            <th>Name</th>
            <th>Email</th>
            <th>Project</th>
            <th>Devices</th>
            <th>Main Stack</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>{this.renderRows()}</tbody>
      </table>
    );
  }

  renderRows() {
    return this.state.list.map((member) => {
      return (
        <tr key={member.id}>
          <td>
            <div className="avatar">
              <img src={member.avatar} alt={member.name} />
            </div>
          </td>
          <td>{member.name}</td>
          <td>{member.email}</td>
          <td>{member.project}</td>
          <td>{member.devices}</td>
          <td>{member.mainstack}</td>
          <td>
            <button className="btn btn-warning" onClick={() => this.load(member)}>
              <i className="fa fa-pencil"></i>
            </button>
            <button
              className="btn btn-danger ml-2"
              onClick={() => {
                this.confirmRemove(member);
              }}
            >
              <i className="fa fa-trash"></i>
            </button>
          </td>
        </tr>
      );
    });
  }

  render() {
    return (
      <Main>
        {this.renderForm()}
        {this.renderTable()}
        <Helmet>
          <title>Add Member</title>
        </Helmet>
      </Main>
    );
  }
}

解决方法

您应该使用 formik 状态，而不是您的组件状态。同样对于重置字段，您应该像这样使用 onSubmit={(e,{ resetForm }) :

    <Formik
      initialValues={initialState.member}
      validationSchema={formSchema}
      onSubmit={(e,{ resetForm }) => {
          //Your submit code
          ...
          //Then reset with this function
          resetForm({
            values: {
              ...e,},});
        }}
    >
    {({ handleChange,values,touched,errors }) => ( // <-- use this state
      <Form>
           // Your form code .jsx,you can seperate them aswell just pass state from above! 
      </Form>
     )}
    </Formik>

Formik Basic