Question

尝试使用 react-hook-form FormContext。

我在useForm钩子中提供deafultValues对象。但是无法用Bottom.tsx组件中的默认值填充我的组件（简单文本字段）。

Answer 1

不确定您是否可以使用此方法，但是我可以通过扩展方法并对两个Controller使用TextFields来使其正常工作。另外，您是从RHF导入control，但实际上是从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

react-hook-form FormContext默认值问题

1 个答案: