CODEWITHSUNDEEP
javascriptreactjstypescriptantd
Alex Ironside
Alex Ironside

Reputation: 5059

Manually updating Form.Item value

I need to update the value of Form.Item manually. I have a custom component, which returns selected value, and want to pass this value to the Form for validation and so I can send it.

Is this possible with antd?

Here's the simplified code:

import { Form } from "antd";
import { FC, ReactElement, useEffect, useState } from "react";

const Child: FC<{
  returnValue: (value: any) => void;
}> = ({ returnValue }): ReactElement => {
  return <input onChange={(e) => returnValue(e.currentTarget.value)} />;
};

export default function App() {
  const { useForm } = Form;
  const [form] = useForm();

  const [value, setValue] = useState<string>("");

  const setNewValue = (newVal: string) => setValue(newVal);

  useEffect(() => {
    console.log(value);
  }, [value]);

  return (
    <div className="App">
      test
      <Form form={form}>
        <Form.Item
          //value={value} I'm looking form smth like this
        >
          <Child returnValue={setNewValue} />
        </Form.Item>
      </Form>
    </div>
  );
}

And here is the code sandbox.

Using <Input> from antd will not work in my case. This is a simplified problem. I have a way more complex component, which behaves in a similar way. The returnValue is how I managed to pull the value out of the component.

Upvotes: 0

Views: 1888

Answers (1)

Ranu Vijay
Ranu Vijay

Reputation: 1297

For a class based component, this is how you would define a form

class CustomForm extends React.Component {
  formRef = React.createRef();
  constructor()
    render(){
      return(
        <Form 
          ref={this.formRef} 
          name="customForm"
        >
          <Form.Item label="Email" name="email">
            <Input />
          </Form.Item>
        </Form>
      )} 
}

and this is how you set form.items value

componentDidUpdate(){
    this.formRef.current.setFieldsValue({
       email: this.props.customerData.map((d) => d.email),
    });
   }

you can convert the logic for the functional component.

Upvotes: 2

Related Questions