用react admin v4替换react final-form中的form.change

Question

我有这个组件为react v3制作，它允许我生成一个id代码。现在我正在升级到react的第4版，我不知道如何替换代码的一部分。

form.change("referredCode", code);

以下是组件的完整代码。

import React, { useEffect, useState } from "react";
import { TextInput, useDataProvider, LoadingIndicator } from "react-admin";
import { useForm } from "react-final-form";
import { randomIdGenerator } from "../../helpers/randomIdGenerator";

export default function UserReferredCode({ record }) {
  const { referredCode } = record;
  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const dataProvider = useDataProvider();
  const form = useForm();

  useEffect(() => {
    if (!referredCode) {
      // Generar id aleatorio
      setIsLoading(true);
      setCode(randomIdGenerator(6));
    }
  }, []);

  useEffect(() => {
    if (code) {
      dataProvider
        .getList("users", {
          pagination: { page: 1, perPage: 1 },
          filter: { referredCode: code },
        })
        .then(({ data }) => {
          if (data.length > 0) {
            setCode(randomIdGenerator(6));
          } else {
            setIsLoading(false);
          }
        })
        .catch((e) => {
          setIsLoading(false);
          console.log(e);
        });
    }

    form.change("referredCode", code);
  }, [code]);

  return (
    <>
      {isLoading ? (
        <LoadingIndicator />
      ) : (
        <TextInput
          disabled
          source="referredCode"
          name="referredCode"
          type="text"
          placeholder="Code"
          initialValue={referredCode || code}
        />
      )}
    </>
  );
}

Answer 1

您应该有一个Form组件来包装所有这些。

检查Form文档https://marmelab.com/react-admin/doc/4.0/Form.html

然后您可以从useFormContext() (从react form)访问它。

表单具有接受名称和值的操作setValue。

https://react-hook-form.com/api/useform/setvalue