时间戳

首页 > 解决方案 > 尝试将 formik 表单提交给操作

javascript - 尝试将 formik 表单提交给操作

问题描述

这可能是一个简单的修复，但我不知所措，因为我还在学习这个。我构建了一个动作 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 操作，然后实习生应该在我的减速器中引发 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>

标签： javascriptreactjsreduxformik

解决方案

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

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

推荐阅读