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.

How about `getFieldProps` takes over all the properties of a form control

See original GitHub issue

Now, getFieldProps will take two arguments, then return some properties which will be transfered to form control.

<Select
  {...getFieldProps('select', {
    rules: [{ required: true }],
  })}
  placeholder="please select"
/>

However, not all the developers know that getFieldProps has occupied onChange(and value and maybe more event triggers). So, they may write something like this:

<Select
  {...getFieldProps('select', {
    rules: [{ required: true }],
  })}
  placeholder="please select"
  onChange={handleChange} // Oops...
/>

It seems that getFieldProps is broken now. Actually, if we want to add an event handler to Select, we have to do this:

<Select
  {...getFieldProps('select', {
    rules: [{ required: true }],
    onChange: handleChange, // Works fine.
  })}
  placeholder="please select"
/>

A developer have to know what getFieldProps will return now. It is not easy, if you are not familiar with getFieldProps. Because the return value of getFieldProps depends on the second argument.

But… If getFieldProps take over all the properties of Select:

<Select
  {...getFieldProps('select', {
    rules: [{ required: true }],
    props: { // Just pass all the properties to the second argument
      placeholder: 'please select',
      onChange: handleChange,
    },
  })}
/>

We don’t need to care about what will getFieldProps return. What does a developer need to know is: if you use getFieldProps, all the properties should be passed to option.props.

After getFieldProps takes over all the properties, it can check those properties and throw some warning:

  1. If user set option.props.defaultValue, warn: ‘Please set option.initialValue, instead of …’
  2. If user set option.props.defaultChecked, warn: ‘Please set option.initialValue and options. valuePropName, instead of …’

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:8
  • Comments:12 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
afc163commented, Apr 29, 2016

I think it is ugly for writing or reading. Make Form more complex.

1reaction
benjycuicommented, Jul 25, 2016

Prefer: https://github.com/ant-design/ant-design/issues/1533#issuecomment-215958946

For it looks like react-dnd’s connector… http://gaearon.github.io/react-dnd/docs-drag-source-connector.html#example

If you think it’s OK, I will implement this feature in antd@2.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

useController | React Hook Form - Simple React forms validation
React hooks for controlled component ... The following table contains information about properties which ... Touched state for current controlled input.
Read more >
Tutorial - Formik
Learn how to build forms in React with Formik. ... By colocating all of the above in one place, Formik keeps things organized--making...
Read more >
Manage Forms In React With Formik - C# Corner
Formik provides all the required features out-of-the-box for managing forms,. Initializing form state; Updating value state on control value ...
Read more >
formik.getFieldProps is not a function - Stack Overflow
this error is raised because you are using getFieldProps() function on Field component provided by formik and not on normal component like ...
Read more >
Building forms with Formik in React - LogRocket Blog
Validation can be done in between user inputs, and an arbitrary submit function is executed on form submit. In this article, we'll review...
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