如何将 react-google-places-autocomplete 与 react-hook-from 集成？

Question

我想在我的表单中输入位置信息，如下所示

我正在为此使用现成的组件 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;

我通常用 material ui Textfield 的反应挂钩形式做以下事情是：

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>

所以在这里我必须使用 GooglePlacesAutocompleteComponent

而不是 TextField

我想让用户知道它的要求ui红色。

我认为像下面这样的东西应该是可能的，但我没有得到要传递的道具：

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

Answer 1

GooglePlacesAutocomplete 使用 react-select internally. In RHF docs，它向您展示了如何与 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 公开了一个 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>
  );
};

并且在您的表单中：

<Controller
  name="location"
  rules={{
    required: "This is a required field"
  }}
  control={control}
  render={({ field, fieldState }) => (
    <GooglePlacesAutocompleteComponent
      {...field}
      error={fieldState.error}
    />
  )}
/>

如何将 react-google-places-autocomplete 与 react-hook-from 集成？

How to integrate react-google-places-autocomplete with react-hook-from?

reactjs

react-hook-form

react-google-places-autocomplete