在 React 中使用 htmlFor 连接两个元素

Question

有一个带有按钮的 Formik 表单可以正常工作并具有以下结构：

class CreateProviderForm extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit = values => { // this is called when the button is clicked
    ...
  };

  render() {
   
    const initialValues = {
        name: '',
        phone: '',
    };
    const requiredErrorMessage = 'This field is required';
    const validationSchema = Yup.object({
      name: Yup.string().required(requiredErrorMessage),
      phone: Yup.string().required(requiredErrorMessage),
     
    });
    return (
      <Layout>
        <ContentContainer name="Create Provider">
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form>
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
                    </div>
                    <Label>Contact Phone</Label>
                    <Field
                      name="phone"
                      country="fr"
                      as={PhoneInput}
                      onChange={e =>
                        setValues({
                          ...values,
                          phone: e,
                        })
                      }
                    />
                    <div>
                      {touched.phone && errors.phone ? errors.phone : null}
                    </div>   
                    <Button type="submit"> // here is the button, inside Formik
                      SUBMIT
                    </Button>               
                  </Grid.Column>
                </Grid>
              </Form>
            )}
          </Formik>
        </ContentContainer>
      </Layout>
    );
  }
}

我想将按钮移到 ContentContainer 之外，我知道的唯一方法是为此使用 htmlFor。

所以我把按钮移到了外面，添加到按钮 id="amazing" 和 formik：htmlFor="amazing" 但它不起作用。

这里是：

...
return (
      <Layout>
        <Grid.Column>
          <Buttontype="submit" id="amazing"> // here is the id
            Create provider
          </Button>
        </Grid.Column>
        <ContentContainer name="Create Provider">
          <Formik
            htmlFor="amazing" // here is htmlFor
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form>
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
         

       </div>

...

关于如何将按钮连接到该元素并且提交仍然有效的任何想法？

Answer 1

假设 Form 组件最终将 props 传递给 form 元素，那么您可能会向表单提供 id prop，向表单提供 form prop按钮。

...
return (
      <Layout>
        <Grid.Column>
          <Button type="submit" form="amazing"> // <-- point to form
            Create provider
          </Button>
        </Grid.Column>
        <ContentContainer name="Create Provider">
          <Formik
            htmlFor="amazing" // here is htmlFor
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form id="amazing"> // <-- set the form id here
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
         

       </div>

在 React 中使用 htmlFor 连接两个元素

Connect two elements with htmlFor in React

html

javascript

reactjs

formik