benmagyar / form-hooks Goto Github PK
View Code? Open in Web Editor NEWMaking forms in React easier... with hooks
Making forms in React easier... with hooks
I am trying to use your component in my CRA web app. But I immediatly get this:
TypeError: (0 , _react.useState) is not a function
useForm
C:/Users/Bruce/Dropbox/Projects/AcesTrader/node_modules/form-hooks/lib/index.js:117
114 | _ref$validateOnChange = _ref.validateOnChange,
115 | validateOnChange = _ref$validateOnChange === void 0 ? true : _ref$validateOnChange;
116 |
117 | var _useState = (0, _react.useState)({}),
| ^ 118 | _useState2 = _slicedToArray(_useState, 2),
119 | errors = _useState2[0],
120 | setErrors = _useState2[1];
View compiled
DialogForm
C:/Users/Bruce/Dropbox/Projects/AcesTrader/src/components/Charts/ChartDashboard/DialogForm.js:6
3 | import React from 'react'
4 | import { useForm } from 'form-hooks'
5 |
6 | const DialogForm = () => {
7 | const { errors, touched, values, handleBlur, handleChange, handleSubmit, isSubmitting } = useForm({
8 | initialValues: {
9 | name: 'Bruce',
View compiled
โถ 17 stack frames were collapsed.
My package.json includes these in "dependencies":
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",
I guess it's too early to try this experimental feature.
[email protected]
Add the ability to reset form back to initial values.
Because API doesn't export setValues I can't manually get them back to inital values.
First idea was to use handleChange for each value, but that function expects event, not string, so I can't just call handleChange('someValue') for each input to reset them back. What I have to do is I have to pass mocked event object with target.name
to make this work, which I feel is a hack.
Another (hacky) way to reset form would be to pass initial values as props and then reset them back to initial when I need to. Problem is that I have to define them in parent component and create that component just to make this work (which I wouldn't need usually).
I think this should be easy, just call this inside resetForm
:
setErrors({});
setValues(initialValues);
setTouched({});
setIsSubmitting(false);
setSubmitCount(0);
Same as you're doing in effect function.
On a side note, I think it would be nice to export all set methods (setValues, setTouched...) so you'll allow customization of values programmatically when needed.
If you set initialValues
from props
and props update the values
don't update.
I have made this example to demonstrate the bug:
https://codesandbox.io/s/16p2053qq
The solution I think after checking the code will be to add this:
useEffect(() => {
setValues(initialValues);
}, [initialValues]);
so if the initial values change the values should change to.
It would be great if useForm
could handle <input type="file" />
a bit better. Right now when a file is selected the only thing we get is a fake path to this file instead of a FileList
object.
One simple change that would allow is to add another condition inside the value
function:
function value (event) {
// normalize values as Formik would
// https://github.com/jaredpalmer/formik/blob/348f44a3016113d6e2b70db714739804ad0ed4c4/src/Formik.tsx#L321
- const { checked, type, value } = event.target
+ const { checked, type, value, files } = event.target
if (/number|range/.test(type)) {
const parsed = parseFloat(value)
return isNaN(parsed) ? '' : parsed
} else if (/checkbox/.test(type)) {
return checked
+ } else if (/file/.test(type)) {
+ return files
}
return value
}
@BenMagyar would you consider extending values that both validateOnBlur
and validateOnChange
can take, so that we can decide whether we want them to be triggered even when this condition is not meet:
Only fired when all fields have been touched that were in the initialValues object.
What I would suggest is to leave true
and false
as they are currently to avoid introducing a breaking change, but also add ability to pass a function like so:
useForm({
validateOnChange: (name) => doSomething(name),
validateOnBlur: (name) => doSomethingElse(name),
});
This way we would have a lot more possibilities when deciding whether some fields should be validated when onChange
and/or onBlur
are triggered. The function could be executed with the field name as an argument and validation would be triggered when the function returns true
.
The function would also allow to always trigger the validation, even if not all initialValues
fields are touched:
useForm({
validateOnChange: () => true,
validateOnBlur: () => true,
});
What do you think?
Currently the only way to set a field value is to pass handleChange
to each fields' onChange
event callback. It would be great if useForm
would return along with handleChange
and the rest something like setValue
which would take a field name and value:
const { setValue } = useForm({ ... })
setValue('someField', 'test')
This could be really helpful for example when you would need to reset a single field and not a whole form.
EDIT: It could also take a third argument
touched
to inform the internal logic whether the field should be set or not as touched.
Similarly to #11 it would be really useful to also have a resetValue(name)
function that would reset a field to a value from initialValues
.
EDIT: It could also take a second argument touched
to inform the internal logic whether the field should be left or not as touched.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.