[英]How to integrate react-google-places-autocomplete with react-hook-from?
I wanted to have a input for location in my form like below我想在我的表单中输入位置,如下所示
I am using a ready made component for this https://www.npmjs.com/package/react-google-places-autocomplete
我正在为此https://www.npmjs.com/package/react-google-places-autocomplete
使用现成的组件
import React from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
const GooglePlacesAutocompleteComponent = () => (
<div>
<GooglePlacesAutocomplete
apiKey="xxxxxxxxxxxxxxx"
/>
</div>
);
export default Component;
What I generally do the following with react hook form for with a material ui Textfield
is我通常使用带有材质 ui Textfield
react hook form 执行以下操作
const validationSchema = Yup.object().shape({
location: Yup.string().required("Location is required"),
});
const {
control,
handleSubmit,
formState: { errors },
reset,
setError,
} = useForm({
resolver: yupResolver(validationSchema),
});
and materialui textfield
<Controller
name="location"
control={control}
render={({ field: { ref, ...field } }) => (
<TextField
{...field}
inputRef={ref}
fullWidth
label="location"
margin="dense"
error={errors.location ? true : false}
/>
)}
/>
<Typography variant="inherit" color="textSecondary">
{errors.name?.message}
</Typography>
So Here instead of TextField
I have to use GooglePlacesAutocompleteComponent
所以这里我必须使用GooglePlacesAutocompleteComponent
而不是TextField
I want user to know its required.我希望用户知道它的要求。
I think something like below should be possible, but I am not getting what props to pass我认为像下面这样的事情应该是可能的,但我没有得到什么道具通过
<Controller
name="location"
control={control}
render={({ field: { ref, ...field } }) => (
<GooglePlacesAutocompleteComponent
<--------------------------->
But for this component how can i pass the below things
{...field}
inputRef={ref}
fullWidth
label="location"
margin="dense"
error={errors.location ? true : false}
<--------------------------->
/>
)}
/>
<Typography variant="inherit" color="textSecondary">
{errors.name?.message}
</Typography>
GooglePlacesAutocomplete
uses react-select internally. GooglePlacesAutocomplete
内部使用react-select 。 In RHF docs , it shows you how to integrate with the Select
component from react-select:在 RHF 文档中,它向您展示了如何与 react-select 中的Select
组件集成:
<Controller
name="iceCreamType"
control={control}
render={({ field }) => <Select
{...field}
options={[
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
]}
/>}
/>
GooglePlacesAutocomplete
exposes a SelectProps
prop to let you override the Select
props, so this is how you use it with RHF: GooglePlacesAutocomplete
公开了一个SelectProps
道具,让您可以覆盖Select
道具,所以这就是您在 RHF 中使用它的方式:
const GooglePlacesAutocompleteComponent = ({ error, ...field }) => {
return (
<div>
<GooglePlacesAutocomplete
apiKey="xxxxxxxxxxxxxxx"
selectProps={{ ...field, isClearable: true }}
/>
{error && <div style={{ color: "red" }}>{error.message}</div>}
</div>
);
};
And in your form:并以您的形式:
<Controller
name="location"
rules={{
required: "This is a required field"
}}
control={control}
render={({ field, fieldState }) => (
<GooglePlacesAutocompleteComponent
{...field}
error={fieldState.error}
/>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.