question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Higher-order API for getFieldDecorator

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

The current API for getFieldDecorator leads to multiple problems for me. The biggest issue is that it interferes with flow type checking, since you are forced to construct react components for which some props are magically added afterwards. For example, SomeInputComponent might be a react component which always expects a value prop. Even though, getFieldDecorator will ensure that this prop is added, flow (and TypeScript probably too?) will complain that the prop was not provided. If a “dummy prop” is provided, antd will complain about that.

<FormItem label="Label">
	{getFieldDecorator("name")(<SomeInputComponent />)}   // <-- strictly speaking, a prop is missing here
</FormItem>

What does the proposed API look like?

In my opinion the following API would yield multiple benefits:

<FormItem label="Label">
	{getFieldDecorator("name")((value, onChange) => <SomeInputComponent value={value} onChange={onChange} />)}
</FormItem>

Since props are passed via a normal mechanism (function parameters) and not through some “magic way”, you would get:

  1. Better typechecking
  2. You would avoid options, such as valuePropName, since you could easily map things in your higher-order function yourself (e.g., (value, onChange) => <Checkbox checked={value} />).
  3. The API could also work for stateless components (not too sure about that, though?), which is not possible at the moment.

If you are concerned about conciseness, you could always write something like {getFieldDecorator("name")(props => <SomeInputComponent {...props} />)}.

What do you think? Is this doable? Or are there strong reasons not to follow this approach?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
zombieJcommented, May 5, 2019

In Form, we want to simplify developer code since it cost too much duplicate code if use render component. In addition, we have plan for optimizing performance with Form. This will make hard to do so.

We may not accept this feature requirement currently.

0reactions
annilqcommented, Jul 26, 2019

is this problem solved? can anyone tell me how to solve it?

Read more comments on GitHub >

github_iconTop Results From Across the Web

ant-design: Higher-order API for getFieldDecorator. #11259
The current API for getFieldDecorator leads to multiple problems for me. The biggest issue is that it interferes with flow type checking, since...
Read more >
Ant Design : getFieldDecorator() - Stack Overflow
I am using ant design but when I run this code it says this.props.form is undefined . In this line when I declare...
Read more >
Form - Ant Design
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc....
Read more >
Use Ant Design Form with React Context API
Item> {getFieldDecorator("userName", { rules: [{ required: true, message: "Please input your username!" }] })(<Input placeholder="Username" />)} ...
Read more >
Executing the HostListing Mutation - TinyHouse: A Fullstack React ...
... we'll trigger the `hostListing` mutation we have in our API and pass the relevant ... In the second argument of the getFieldDecorator()...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found