e.persist is not a function
See original GitHub issueI use ant-design ui library, and i got this error when i use RadioGroup and Radio
Uncaught TypeError: e.persist is not a function
at Formik._this.handleChange (formik.es6.js:1110)
at onChange (UserType.jsx:75)
at Object.RadioGroup._this.onRadioChange [as onChange] (group.js:80)
at handleChange (Checkbox.js:166)
at Object.executeOnChange (LinkedValueUtils.js:132)
at ReactDOMComponent._handleChange (ReactDOMInput.js:241)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
at executeDispatch (EventPluginUtils.js:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
at handleTopLevelImpl (ReactEventListener.js:72)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)
formik code:
_this.handleChange = function (e) {
if (isReactNative) {
if (process.env.NODE_ENV !== 'production') {
console.error("Warning: Formik's handleChange does not work with React Native. Use setFieldValue and within a callback instead. For more info see https://github.com/jaredpalmer/formikhttps://github.com/jaredpalmer/formik#react-native");
}
return;
}
e.persist(); // <---- THIS
var _a = e.target, type = _a.type, name = _a.name, id = _a.id, value = _a.value, checked = _a.checked, outerHTML = _a.outerHTML;
var field = name ? name : id;
var val = /number|range/.test(type)
? parseFloat(value)
: /checkbox/.test(type) ? checked : value;
if (!field && process.env.NODE_ENV !== 'production') {
console.error("Warning: You forgot to pass an `id` or `name` attribute to your input:\n\n " + outerHTML + "\n\nFormik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void\n");
}
_this.setState(function (prevState) {
return (__assign({}, prevState, { values: __assign({}, prevState.values, (_a = {}, _a[field] = val, _a)) }));
var _a;
});
if (_this.props.validateOnChange) {
_this.runValidations(__assign({}, _this.state.values, (_b = {}, _b[field] = value, _b)));
}
var _b;
};
example:
const UserTypeForm = ({
values,
touched,
errors,
dirty,
handleChange,
handleBlur,
handleSubmit,
handleReset,
isSubmiting,
...props
}) => (
<Form className={props.className} onSubmit={handleSubmit}>
<Form.Item
label="Type"
required
validateStatus={touched.type && errors.type ? "error" : ""}
help={touched.type && errors.type}
>
<RadioGroup
name="type"
value={values.type}
onChange={handleChange} // <--- Here error
>
<RadioGroup.Radio value={1}>One</RadioGroup.Radio>
<RadioGroup.Radio value={2}>Two</RadioGroup.Radio>
<RadioGroup.Radio value={3}>Three</RadioGroup.Radio>
</RadioGroup>
</Form.Item>
<Form.Item className="next-button">
<SuccessButton htmlType="submit">
Save and next
</SuccessButton>
</Form.Item>
</Form>
)
Now i resolve this error by:
onChange={(e) => {
e.persist = () => {}
handleChange(e)
}}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:6
- Comments:8 (4 by maintainers)
Top Results From Across the Web
TypeError: e.persist is not a function in Typeahead Bootstrap ...
I am getting the error TypeError: e.persist is not a function when attempting to try different methods to test my application in Enzyme...
Read more >Error "Uncaught TypeError: e.persist is not a function"
Option 1. Copy and paste the text into the Parameter dialog instead of using the normal input method (IME).
Read more >event.persist() should be called when using React synthetic ...
This rule applies when a React synthetic event is used inside an asynchronous callback function without calling event.persist() .
Read more >SyntheticEvent - React
persist () doesn't do anything because the SyntheticEvent is no longer pooled. Note: As of v0.14, returning false from an event handler will...
Read more >Persist the State of the Grid alongside the Function Handlers
By default JSON.stringify() cannot serialize function definitions. Event handlers and other similar Grid configurations are lost when the state is persisted ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You will need to wrap the input in its own component treat it like a custom input. Use setFieldValue(this.props.name, value) and you should be good
Just like React Native and many third party input components, you may not have access to the synthetic DOM event
e
. Thus,e.target.name
ande.persist()
are not available. In these situations, you should usesetFieldValue
andsetFieldTouched
.React Native Formik Docs: https://github.com/jaredpalmer/formik#react-native Working with 3rd Party Inputs example: https://codesandbox.io/s/jRzE53pqR