Read value of imported form component upon submit (without storing in state)

user_13812575 0
Viewed 1224

I developed a component for ReactJS as to be used as a form item in conjunction with Antd's form. But, the onFinish callback function returns undefined for the value of my custom component. Probably, Antd's form is not being able to retrieve the value from my component. That does not happen when I am only using Antd components as form items.

On the example below, MultipleEntry is the component I have developed. MultipleEntry has a nested TextArea component.

function Sandbox(props) {

    return (
        <>
            <Form onFinish={(values) => console.log(values)}>
                <Form.Item name={'myComponent'}  >
                    <MultipleEntry />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">Submit</Button>
                </Form.Item>
            </Form>

        </>
    );
}


function MultipleEntry(props) {

    const [value, setValue] = useState([]);
    
    const Split = string =>
    {
        setValue(String(string).split(';'))
    }

    return (
        <TextArea
            onChange={(e) => {Split(e.target.value)}}
        />
    );
}

I thought about two alternatives here:

  1. Storing the values of MultipleEntry in its internal state.
  2. Storing the values of MultipleEntry on the parent component.

But, I dont want to store the values anywhere on the client's state, since the data inside the MultipleEntry component would be too big and impactful for performance.

How can I use Antd form's API to make it read the value of MultipleEntry as a form field, and populate the input parameter of onFinish?

antd reactjs javascript
1 Answers

Antd's FormItem behaves like a high-order component and passes some props to the child component.

So, if you are using any HTML form field elements like input, then FormItem will pass the onChange and value as props to input. Hence FormItem will control the value and onChange event of that element.

But having said above you will not be able to use the styling if some validation error is there in the FormItem.

Similarly Antd's component also usages native HTML form field elements and usages value and onChange. But on top of that, you will get the styles if there are any validation errors.

Here it comes your specific case, you can use onChange and value from props and utilize the same as following

function MultipleEntry(props) {
  const Split = e => {
    e.target.value = String(e.target.value).split(",");
    props.onChange(e);
  };

  return <input value={props.value} onChange={e => Split(e)} />;
}

If you are using any native HTML form elements then just split the props and pass it across the element like below

function MultipleEntry(props) {
  return <input {...props} />;
}

And for splitting you can use getValueFromEvent and then split the value there.

Here is the link for the modified sandbox to especially solve your problem https://codesandbox.io/s/agitated-lake-65prw

user_96697240
Related