如何在react中使用react-hook-form获取react-phone-input-2值

Question

我在提交时获得了react值，但没有获得react值，如何使用TextField - ReactPhoneInput -form获得值

import ReactPhoneInput from "react-phone-input-2"
import {TextField,Button}from "@material-ui/core"

const {register, handleSubmit,formState: { errors }} = useForm()

const getData= (data) => {
   console.log(data.username)
   console.log(data.username);
}

表格

<form onSubmit={handleSubmit(getData)} >

  <TextField {...register("username")} />

   <ReactPhoneInput
      inputExtraProps={{
        name: "phone",
        required: true,
        autoFocus: true
      }}

      country={"in"}
       onlyCountries={["in"]}                     
       countryCodeEditable={false}
        specialLabel={"Player Mobile Number"}
       rules={{ required: true }}
     />
<Button type='submit>Submit</Button> 
</form>

Answer 1

RHF是一个外部受控组件，因此您应该在这里使用<ReactPhoneInput />的<Controller />组件。在文档中查看此section以获取更多信息。

<Controller
  control={control}
  name="phone"
  rules={{ required: true }}
  render={({ field: { ref, ...field } }) => (
    <ReactPhoneInput
      {...field}
      inputExtraProps={{
        ref,
        required: true,
        autoFocus: true
      }}
      country={"in"}
      onlyCountries={["in"]}
      countryCodeEditable={false}
      specialLabel={"Player Mobile Number"}
    />
  )}
/>

​

​