[英]Connect two elements with htmlFor in React
There is a Formik form with a button which works fine and has this structure:有一个带有按钮的 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>
);
}
}
I want to move the button outside of the ContentContainer
, the only way I know about is using htmlFor
for this.我想将按钮移到ContentContainer
之外,我知道的唯一方法是为此使用htmlFor
。
So I've moved the button outside, add to the button id="amazing"
and to the formik: htmlFor="amazing"
but it doesn't work.所以我把按钮移到外面,添加到按钮id="amazing"
和 formik: htmlFor="amazing"
但它不起作用。
Here it is:这里是:
...
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>
... ...
Any ideas about how to connect the button to that element and the submit still working?关于如何将按钮连接到该元素并且提交仍然有效的任何想法?
Assuming the Form
component eventually passes props down to a form
element, then you can likely provide an id
prop to the form and a form
prop to the button.假设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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.