React-Hook-form Проблема значений по умолчанию FormContext

Question

Попытка использовать форму реакции-крючка FormContext.

Я предоставляю объект deafultValues ​​в хуке useForm. Но не смог заполнить мой компонент, простое текстовое поле, значением по умолчанию в компоненте Bottom.tsx.

песочница

Answer 1

Не уверен, что у вас это работает, но мне удалось заставить его работать, распространив методы и используя Controller для обоих TextFields. Кроме того, вы импортировали control из RHF, но фактически возвращается из useFormContext()

import React from "react";
import Bottom from "./Bottom";
import { Grid } from "@material-ui/core";
import { useForm, FormContext } from "react-hook-form";

const App = () => {
  const defaultValues = {
    car: "AUDI",
    city: "Tokyo"
  };
  const { ...methods } = useForm({ defaultValues });

  return (
    <FormContext {...methods}>
      <Grid container direction="column">
        <Grid item>
          <Bottom />
        </Grid>
      </Grid>
    </FormContext>
  );
};

export default App;

import React from "react";
import { TextField } from "@material-ui/core";
import { useFormContext, Controller } from "react-hook-form";

interface BottomProps {}

const Bottom: React.FunctionComponent<BottomProps> = (props: BottomProps) => {
  const { register, control } = useFormContext();
  return (
    <>
      <Controller
        name="city"
        control={control}
        as={
          <TextField
            ref={register}
            style={{ margin: 20 }}
            variant="outlined"
            size="small"
            label="City"
          />
        }
      />
      <Controller
        name="car"
        control={control}
        as={
          <TextField
            ref={register}
            style={{ margin: 20 }}
            variant="outlined"
            size="small"
            label="Car"
          />
        }
      />
    </>
  );
};

export default Bottom;

https://codesandbox.io/s/dreamy-goldwasser-so349?file=/src/App.tsx