react-google-places-autocomplete值获取及MUI表单提交实现

核心逻辑很简单，你当前用的react-hook-form除了register直接绑定原生输入框的用法，还支持手动给表单字段赋值，配合GooglePlacesAutocomplete暴露的选中回调、自定义输入框配置，就能无缝接入现有提交流程，不用改原有表单的提交逻辑。

具体实现步骤 #

• 第一步：调整useForm的解构配置，取出setValue方法，用来手动同步自动补全选中的地址值到表单状态
  原来的useForm调用保留原有配置，补充解构setValue即可：

  const {
    register,
    handleSubmit,
    setValue, // 新增该方法用于手动更新表单字段值
    formState: { errors }
  } = useForm(/* 原有默认值、提交时机等配置全部保留 */)
  

• 第二步：替换原来单独引入的GooglePlacesAutocomplete组件，配置选中回调和自定义输入框，直接复用现有MUI TextField样式和register绑定逻辑：

  <GooglePlacesAutocomplete
    apiKey="xx-xx"
    selectProps={{
      // 用户选中联想地址时触发，参数为选中的地址完整对象
      onChange: (selectedPlace) => {
        // 按需提取地址对象里的字段赋值给表单，示例取格式化后的完整地址
        setValue("address", selectedPlace?.label || "", {
          shouldValidate: true, // 赋值后自动触发配置的校验规则，和手动输入行为一致
          shouldDirty: true
        })
        // 如果需要拆分省市区、经纬度等独立字段，直接从selectedPlace里解构对应内容，多次调用setValue赋值即可
      },
      // 自定义输入组件，直接用MUI TextField，和现有表单的输入框样式、交互完全统一
      renderInput: (inputParams) => (
        <TextField
          {...inputParams} // 透传自动补全组件需要的输入框属性，不可省略
          required
          fullWidth
          id="address"
          label="地址"
          name="address"
          autoComplete="off"
          // 校验提示和原有description字段写法一致
          error={!!errors.address}
          helperText={errors.address?.message}
          // 正常绑定register和校验规则
          {...register("address", {
            required: "请选择有效地址",
          })}
        />
      )
    }}
  />
  

注意事项 #

• 如果你用的GooglePlacesAutocomplete版本较老，选中回调不在selectProps下，直接找组件根属性的onPlaceSelect/onSelect即可，拿到选中的place对象后取值逻辑不变
• 如果不需要自定义输入框样式，可以省略renderInput配置，只要保留选中回调里的setValue逻辑，提交时从表单数据里取到的地址值和其他TextField字段没有区别
• 校验规则和现有字段写法完全通用，正则、长度限制等直接加在register的第二个参数里即可，选中地址后会自动触发校验

内容的提问来源于stack exchange，提问作者Naben