尝试将 formik 表单提交给操作

Question

这可能是一个简单的修复，但由于我仍在学习它，所以我不知所措。我构建了一个 addTenant() 操作，它通常会获取状态并将其传递给分派 post API 调用，看起来像这样

export const addTenant = (tenant) => (dispatch) => {
  axios
    .post("/api/Tenant/", tenant)
    .then((res) => {
      dispatch({
        type: ADD_TENANT,
        payload: res.data,
      });
    })
    .catch((err) => console.log(err)); // error log
};

现在我将我的表单切换为使用 formik，因为我更改了我的模型，导致它有一个嵌套对象，我觉得 formik 可能会使它更容易。问题是我似乎无法将值正确传递给函数以触发 addTenant 操作，然后实习生应该在我的 reducer 中引发 ADD_TENANT 案例，同时在重置表单时将提交设置回 false。

下面是有问题的代码。任何帮助将不胜感激，因为我很困惑。

export class TenantForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      domain_url: "",
      schema_name: "",
      name: "",
      config: [
        {
          date: "",
          tenant_description: "",
        },
      ],
    };
  }

  static propTypes = {
    addTenant: PropTypes.func.isRequired,
  };

  onSubmit = (e) => {
    e.preventDefault();
    const { domain_url, schema_name, name, config } = this.state;
    const show = {
      domain_url,
      schema_name,
      name,
      config,
    };
    this.props.addTenant(tenant);
  };

  render() {
    const {
     domain_url,
     schema_name,
     name,
     config,
    } = this.state;

    const ClientSchema = Yup.object().shape({
      domain_url: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client URL header is required"),
      schema_name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client db name is required"),
      name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client name is required"),
    });

    return (
      <div className={s.root}>
        <Formik
          initialValues={{
            domain_url: "",
            schema_name: "",
            name: "",
            config: [
              {
                date: "",
                tenant_description: "",
              },
            ],
          }}
          // validationSchema={ClientSchema} this is breaking submit
          onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            this.addTenant(values);
            resetForm();
            setSubmitting(false);
          }}
        >
          {({
            values,
            errors,
            status,
            touched,
            handleBlur,
            handleChange,
            isSubmitting,
            setFieldValue,
            handleSubmit,
            props,
          }) => (
            <FormGroup>
              <Form onSubmit={handleSubmit}>
                <legend>
                  <strong>Create</strong> Tenant
                </legend>

Answer 1

为什么不在Formik里面的onSubmit直接执行this.props.addTenant(values);？

onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            this.props.addTenant(values);
            resetForm();
            setSubmitting(false);
          }}

Answer 2

使用handleSubmit函数。
这是一个 Formik 原生函数，您可以将 作为属性传递给表单中的任何 children。
Children component/s可以执行handleSubmit来触发表单提交。

   return (
    <div className='filters-transaction'>
      <Formik>
        {({ values, handleReset, handleSubmit, errors }) => (
          <Form>
            <div className='filters-transaction__filters'>
              <DatePicker
                  onSubmit={handleSubmit}
                />
            </div>
            </Form>
            </Formik>
            </div>

...然后在您的 children 组件中...

return (<button onClick={handleSubmit}>Submit</button>)

尝试将 formik 表单提交给操作

Trying to submit a formik form to an action

javascript

reactjs

redux

formik