如何集成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;

我通常用react hook form和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

我想让用户知道这是必需的。

我认为像下面这样的事情应该是可能的，但我不知道应该通过什么道具：

<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。在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}
    />
  )}
/>

​

​