How to use form.setFieldsValue in antd

[anoninthekop]

Hi forgive my ignorance but I'm just starting with react and I'm not sure how to implement antd form.setFieldsValue in refine.

I'm using this as an example but I want set the value of a hidden field using something like
form.setFieldsValue({ note: 'Hi, man!' });

[omeraplak]

Hey @anoninthekop ,
Welcome, we are glad to see you! Could you check this? https://ant.design/components/form#components-form-demo-control-hooks

[vinclou]

@anoninthekop If you could supply the link to GitHub repo or codesandbox/stackbitz reproduction I would be able to help greatly for now those are more or fewer assumptions without seeing the code.

But after seeing this UI, I can totally say if the intended behavior is -> when I click the create button, the current select value is passed as props to build the initial values for create form you shouldn't be needing the useEffect here and you have two options:

1. use a Form on the list page and possibly track the value with:

// this will track every form state change on the form, one liner
const workType = Form.useWatch('work_type', myListFormProps.form)
// ultimately u can pass the formProps from list page to the child and let it call `getFieldsProps` as well
// Refine has docs on how to filter data, it's very similar concept 

2. You have your selector outside form and control the state urself, with the onChange/onSelect, state value is held
   withing useState or similar, you pass the state directly as props.

const [workType, setWorkType] = React.useState<WorkType>('default')
// ...
// AntD docs have description about controlled selectors 
return (
  <Select
     {...myCustomProps}
     onSelect={myCustomSelectHandler}
     onChange={myCustomOnChangeHandler}
  />
)

3. You can push the current list filter to the route URL and parse it from there too, but that's an overkill for this

These are the options I would first look at implementing before resorting to the useEffect, if you decide to keep ur
useEffect hook the code should be something like this:

// At least you make sure the useEffect is run only when the workType or form changes
React.useEffect(() => {
  form.setFieldsValue({ work_type: workType })
}, [workType, form])

Refer to on why ur state update is anti-pattern: react docs

[anoninthekop]

Thanks for all the help you've provided so far. I have reproduced it in codesandbox so would appreciate if you could have a look

https://codesandbox.io/s/young-firefly-1untpp

[vinclou]

@anoninthekop Well, in your case u could 've just used the setFieldsValue on custom select

import React from "react";
import { useMany, getDefaultFilter } from "@pankod/refine-core";
import {
  List,
  TextField,
  DateField,
  Table,
  useTable,
  Select,
  useDrawerForm,
  CreateButton
} from "@pankod/refine-antd";

import { IWork, IWorkStatus } from "../../interfaces";

import { CreateWork } from "../../components/works";

export type WorkType = 1 | 2 | 3; // I'd rather use strings than enum vals
const initFormValues: Partial<IWork> = {
  work_type: 1
};

export const WorkList: React.FC = () => {
  const { tableProps, filters, setFilters } = useTable<IWork>({
    initialFilter: [
      {
        field: "work_type",
        operator: "eq",
        value: initFormValues.work_type
      }
    ]
  });

  const statusIds = tableProps?.dataSource?.map((item) => item.status_id) ?? [];
  const { data: statusData, isLoading } = useMany<IWorkStatus>({
    resource: "work_status",
    ids: statusIds,
    queryOptions: {
      enabled: statusIds.length > 0
    }
  });

  const {
    drawerProps: createDrawerProps,
    formProps: createFormProps,
    saveButtonProps: createSaveButtonProps,
    show: createShow
    // form: createForm
  } = useDrawerForm<IWork>({
    action: "create",
    resource: "works",
    redirect: false
  });

  const handleChange = (value: WorkType) => {
    createFormProps.form?.setFieldsValue({ work_type: value });
    setFilters([
      {
        field: "work_type",
        operator: "eq",
        value: value
      }
    ]);
  };

  return (
    <List
      headerProps={{
        extra: [
          <Select<WorkType, { value: WorkType; label: string }>
            defaultValue={getDefaultFilter("work_type", filters)}
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              {
                value: 1,
                label: "Faults"
              },
              {
                value: 2,
                label: "Surveys"
              },
              {
                value: 3,
                label: "Projects"
              }
            ]}
          />,
          <CreateButton onClick={() => createShow()}></CreateButton>
        ]
      }}
    >
      <Table {...tableProps} rowKey="id">
        <Table.Column
          dataIndex="timestamp"
          title="timestamp"
          render={(value) => <DateField format="LLL" value={value} />}
        />
        <Table.Column dataIndex="description" title="Description" />
        <Table.Column
          dataIndex="status_id"
          title="Status"
          render={(value) => {
            if (isLoading) {
              return <TextField value="Loading..." />;
            }

            return (
              <TextField
                value={
                  statusData?.data.find((item) => item.id === value)
                    ?.status_name
                }
              />
            );
          }}
        />
        <Table.Column dataIndex="cust_name" title="Name" />
        <Table.Column dataIndex="mobile" title="Phone" />
        <Table.Column dataIndex="location" title="Location" />
        <Table.Column
          dataIndex="start_date"
          title="Scheduled For"
          render={(value) => <DateField format="LLL" value={value} />}
        />
      </Table>
      <CreateWork
        drawerProps={createDrawerProps}
        formProps={createFormProps}
        saveButtonProps={createSaveButtonProps}
        initFormValues={initFormValues}
      />
    </List>
  );
};

// Create
import {
  Create,
  Drawer,
  DrawerProps,
  Form,
  FormProps,
  Input,
  Select,
  ButtonProps,
  Grid,
  useSelect
} from "@pankod/refine-antd";

import { IWork, IWorkStatus } from "../../interfaces";

type CreateWorkProps = {
  drawerProps: DrawerProps;
  formProps: FormProps;
  saveButtonProps: ButtonProps;
  initFormValues: Partial<IWork>;
};

export const CreateWork: React.FC<CreateWorkProps> = ({
  drawerProps,
  formProps,
  saveButtonProps,
  initFormValues
}) => {
  const breakpoint = Grid.useBreakpoint();

  const { selectProps: statusSelectProps } = useSelect<IWorkStatus>({
    resource: "work_status",
    optionLabel: "status_name"
  });

  return (
    <Drawer
      {...drawerProps}
      width={breakpoint.sm ? "500px" : "100%"}
      bodyStyle={{ padding: 0 }}
      zIndex={1001}
    >
      <Create resource="works" saveButtonProps={saveButtonProps}>
        <Form {...formProps} layout="vertical" initialValues={initFormValues}>
          <Form.Item
            label="Description"
            name="description"
            rules={[
              {
                required: true
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Status"
            name="status_id"
            rules={[
              {
                required: true
              }
            ]}
          >
            <Select
              {...statusSelectProps}
              getPopupContainer={(trigger) => trigger.parentElement}
            />
          </Form.Item>

          <Form.Item
            label="Customer Name"
            name="cust_name"
            rules={[
              {
                required: true
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Phone"
            name="mobile"
            rules={[
              {
                required: true
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Location"
            name="location"
            rules={[
              {
                required: true
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="work_type"
            rules={[
              {
                required: true
              }
            ]}
            noStyle
          />
        </Form>
      </Create>
    </Drawer>
  );
};

[vinclou]

@anoninthekop But if I were you, since you require that field, I wouldn't hide it from a user, moreover, u can move the form wrapper to list component to wrap both the selector and create form.items in a fragment or div, since list page selector is the create form item at this point

[anoninthekop]

Thanks that is exactly what I was looking for