在 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道具，為按鈕提供一個form道具。

...
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>