映射表单中的元素(对于Formik) [英] Mapping Elements in a Form (for Formik)

问题描述

在我的表单中，我正在使用Formik/Yup进行验证.目前，这完全可以按照我的形式使用:

In my form, I am using Formik/Yup for Validation. Currently, this works in my form perfectly:

export default function AddUserPage() {
  const [firstName, setFirstName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <div>
      <Formik
        initialValues={{ firstName: "", email: "" }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { firstName, lastName, email, password, phone },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <div className="main-content">
              <form style={{ width: "100%" }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="firstName"
                    name="firstName"
                    helperText={touched.firstName ? errors.firstName : ""}
                    error={touched.firstName && Boolean(errors.firstName)}
                    label="First Name"
                    //onChange={e => setFirstName(e.target.value)}
                    value={firstName}
                    onChange={change.bind(null, "firstName")}
                  />
                  <br></br>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                </div>
              </form>
            </div>
          );
        }}
      </Formik>
    </div>
  );
}

但是，我不想映射所有内容，而是想映射我的文本字段.我如何映射我的文本字段?

However, instead of typing everything, I want to map my text fields. How could I map my text fields?

我尝试过类似的操作，但是在helperText和错误属性上出现错误:

I tried something like this but I get errors for helperText and error properties:

{[{ label: "First Name", state: firstName , type: "text", function: setFirstName},
{ label: "Email", state: email , type: "text", function: setEmail},
  ]}.map((item, index) => (
  <div>
    <TextField
      id="outlined-basic"
      key={index}
      label={item.label}
      variant="outlined"
      type= {item.type}
      helperText= {touched[item.state] ? errors[item.state] : ""}
      onChange={change.bind(null, state)}        
    />
    <br></br><br></br>
  </div>
)

在这里，我在以下辅助文字上出现错误:

Here, I get an error on helper text that:

元素隐式地具有"any"类型，因为类型"any"的表达式不能用于索引类型"FormikTouched< {firstName:string; lastName:字符串；电子邮件:字符串；密码:字符串；电话:字符串； }>'

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'FormikTouched<{ firstName: string; lastName: string; email: string; password: string; phone: string; }>'

我也尝试添加它，但这也会给我一个错误:

I tried adding this as well but this also gives me an error:

helperText = {touched.item.state}

推荐答案

好像您在.map之前有一个综合错误图形括号

Looks like you have an synthetic error figure bracket before .map

此代码使用地图呈现了一些jsx:

this code render some jsx with map:

[
  { label: "First Name",  type: "text"},
{ label: "Email",  type: "text"},
  ].map((item, i) => (
  <div>
    <TextField
      key={i}
      label={item.label}
      type= {item.type}    
    />
  </div>
)

这篇关于映射表单中的元素(对于Formik)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！