javascript - MUI + React Hook 表单 : Fill out TextField value but then can't modify the value

Question

我使用的是 MUI + React Hook Form 的组合，因此我创建了一个 CustomTextField.tsx 组件来使其正常工作。

// CustomTextField.tsx
import { TextField } from "@mui/material";

export default function CustomTextField(props: any) {
  return (
    <Controller
      name={props.name}
      control={props.control}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState
      }) => <TextField onChange={onChange} {...props} />}
    />
  );
}

然后在应用程序/父级级别，我想要执行以下步骤:

1. 获取数据并显示到 TextField。
2. 修改TextField中的文本
3. 在 TextField 中提交新值

这是我的方法:

//App.tsx
export default function App() {
  const { control, handleSubmit } = useForm();
  const [fetchedData, setFetchedData] = useState<string>("");
  ...
  return (
...
        <CustomTextField
          control={control}
          name="description"
          label="Description"
          type="text"
          variant="outlined"
          value={fetchedData ? fetchedData: ""}     //<-- fetched data is set to value of TextField to display
        />
...
  );
}

通过这种方法，我设法在 TextField UI 上显示 fetchedData，但无法修改文本字段上的数据。另外，当我提交时，数据与 TextField 上显示的数据不正确

我为此创建了一个codesandbox链接:https://codesandbox.io/s/blissful-sanne-x858dx?file=/src/App.tsx:190-1155

如何显示获取到的数据，同时还可以修改文本字段中的数据，然后通过React Hook Form提交？

Answer 1

您想要的是有一个文本输入，用户可以在其中键入值，但您也可以通过单击“获取数据”按钮在外部设置该值。

您的设置包含相互矛盾的事实来源。该字段的 value 被设置为 data 状态，并且存储在 react-hook-form 状态中的值将被忽略。

您想要做的是在按下按钮时修改 react-hook-form 的内部状态。

您可以删除本地状态:

const [data, setData] = useState<string>("");

相反，您可以使用表单中的 setValue 辅助函数:

const { control, handleSubmit, setValue } = useForm<FormValues>();

const fetchingData = () => {
  setValue("description", "fetched description Text");
};

在您的CustomTextField中，确保将输入的值设置为表单状态中的值。

render={({
  field: { onChange, value },
  fieldState: { error },
  formState
}) => <CusTextField onChange={onChange} value={value} {...props} />}

Complete Code