as I mentioned in the title, how can I implement my custom handleChange function?
Here's standard example:
const MyTextField = ({ label, ...props }) => {
const [field, meta, helpers] = useField(props);
return (
<>
<input {...field} {...props} />
</>
);
};
const Example = () => (
<div>
<h1>My Form</h1>
<Formik
initialValues={{}}
onSubmit={() => {}}
>
{() => (
<Form>
<MyTextField name="firstName" type="text" label="First Name" />
</Form>
)}
</Formik>
</div>
);
Let's say I have onChange function:
const customHandle = (e) => {
console.log('Custom Function')
}
How can I combine my custom function with Formik
EDIT.
Explanation: I will not use form in my case, I just want to have simple input which will update a 'redux or something else state managmenent'
Related
What I need is to be able to customize textAreaCount and other props in each separate instance of <Texarea/>. The textAreaCount is different for each <Texarea/> so how do I modify the component to be able to pass in custom textAreaCount for each <Texarea/>?
https://codesandbox.io/s/rkv88-forked-vjo0rn?file=/src/App.js:0-948
import React, { useState } from "react";
const Textarea = (value, id, maxLength, textAreaLimit) => {
const [textAreaCount, ChangeTextAreaCount] = React.useState(0);
const [state, setstate] = useState({
headline: "",
title: ""
});
const { headline, title } = state;
const changevalue = (e) => {
setstate({
...state,
[e.target.name]: value
});
ChangeTextAreaCount(e.target.value.length);
};
return (
<>
<p>{textAreaCount}/{textAreaLimit}</p>
<textarea
type="text"
rows={5}
id={id}
value={value}
maxLength={maxLength}
onChange={(e) => {
changevalue(e);
}}
/>
</>
);
};
export default function FullWidthTabs() {
return (
<div>
<Textarea value={headline} id="test" maxLength={5} textAreaLimit={5}/>
<Textarea value={title} id="test2" maxLength={10} textAreaLimit={10}/>
</div>
);
}
Forward the props you need.
const Textarea = (props) => {
const [textAreaCount, setTextAreaCount] = React.useState(0);
const recalculate = (e) => {
setTextAreaCount(e.target.value.length);
};
return (
<>
<p>{textAreaCount}/5</p>
<textarea type="text" rows={5} maxLength={5} onChange={recalculate} {...props} />
</>
);
};
Now it will forward any props into the textarea element. This will set the id and will overwrite the rows prop.
<Textarea id="textarea-1" rows={4} />
<Textarea id="textarea-2" rows={5} maxLength={10} />
As we can see you try to pass props as below:
<Textarea value={title} id="test2" maxLength={10} textAreaLimit={10}/>
But In Your Textarea Component you received props argument as multiple args as below:
const Textarea = (value, id, maxLength, textAreaLimit) => {
return (
<>
</>
);
};
Instead that you need to destruct your props argument or you can set whole passed value props as single object props as below:
Method 1:
const Textarea = ({value, id, maxLength, textAreaLimit}) => {
return (
<>
<textarea type="text" id={id} value={value} rows={5} maxLength={maxLength} onChange={recalculate} textAreaLimit={textAreaLimit} />
</>
);
};
Method 2:
const Textarea = ({...props}) => {
return (
<>
<textarea type="text" id={id} value={value} rows={5} maxLength={maxLength} onChange={recalculate} textAreaLimit={textAreaLimit} />
</>
);
};
Method 3:
const Textarea = (props) => {
return (
<>
<textarea type="text" id={props.id} value={props.value} rows={5} maxLength={props.maxLength} onChange={recalculate} textAreaLimit={props.textAreaLimit} />
// Or Instead you can do as below
// <textarea type="text" rows={5} maxLength={5} onChange={recalculate} {...props} />
</>
);
};
I have a ready-made form in React
I'm trying to add a captcha to it but it would seem that with the only correct option the captcha reload infinity loops
I didt think that in such a simple task in React there could be so many problems
import { GoogleReCaptchaProvider, GoogleReCaptcha } from 'react-google-recaptcha-v3'
type Props = {
onSubmit: (values: AuthRequest) => Promise<AuthResponse>
}
function AuthForm(props: Props) {
const [token, setToken] = useState('')
return (
<div className={cn('container')}>
<GoogleReCaptchaProvider reCaptchaKey="[key]">
<Form
onSubmit={handlers.submit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<FormField name={'email'} />
<div>
<FormField name={'password'} />
</div>
<GoogleReCaptcha
onVerify={(token) => {
setToken(token)
}}
/>
<div>
<Button type="submit">Submit</Button>
</div>
</form>
)}
/>
</GoogleReCaptchaProvider>
</div>
)
}
export { AuthForm }
I solved it like this
import { GoogleReCaptchaProvider, GoogleReCaptcha } from 'react-google-recaptcha-v3'
type Props = {
onSubmit: (values: AuthRequest) => Promise<AuthResponse>
}
function AuthForm(props: Props) {
const [token, setToken] = useState('')
const verifyRecaptchaCallback = React.useCallback((token) => {
setToken(token)
}, []);
return (
<div className={cn('container')}>
<GoogleReCaptchaProvider reCaptchaKey="[key]">
<Form
onSubmit={handlers.submit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<FormField name={'email'} />
<div>
<FormField name={'password'} />
</div>
<GoogleReCaptcha
onVerify={verifyRecaptchaCallback}
/>
<div>
<Button type="submit">Submit</Button>
</div>
</form>
)}
/>
</GoogleReCaptchaProvider>
</div>
)
}
export { AuthForm }
Trying to get this form field component to take a simple-react-code-editor:
not sure if I'm going about this the right way by trying to pass props form the useField hook, but it works for textfield tags, so thought the same method could apply to this as well. Although, I get the feeling the onValueChange callback is different from the onChange callback that this component doesn't have. Is there a way to add it somehow?
Editor Component:
const MyEditor = ({value, onChange}) => {
const highlight = (value) => {
return(
<Highlight {...defaultProps} theme={theme} code={value} language="sql">
{({ tokens, getLineProps, getTokenProps }) => (
<>
{tokens.map((line, i) => (
<div {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
))}
</div>
))}
</>
)}
</Highlight>
)
};
return (
<Editor
value={value}
onValueChange={onChange}
highlight={highlight}
padding={'40px'}
style={styles.root}
/>
);
}
export default MyEditor;
Form with Field Component as MyEditor (tried using useField hook):
const FormQueryTextBox = ({...props}) => {
const [field] = useField(props);
return (
<MyEditor onChange={field.onChange} value={field.value}/>
)
}
const validationSchema = yup.object({
query_name: yup
.string()
.required()
.max(50)
});
const AddQueryForm = () => {
return (
<div>
<Formik
validateOnChange={true}
initialValues={{
query:""
}}
validationSchema={validationSchema}
onSubmit={(data, { setSubmitting }) => {
console.log(data);
}}
>
{() => (
<Form>
<div>
<Field
placeholder="query name"
name="query_name"
type="input"
as={TextField}
/>
</div>
<div>
<Field
name="query"
type="input"
as={FormQueryTextBox}
/>
</div>
</Form>
)}
</Formik>
</div>
)
}
components render without errors, but as I type the text doesn't appear.
I figured out that I just need to customize my onChange with the setter from the useFormikContext hook like this:
const FormQueryTextBox = ({...props}) => {
const [field] = useField(props);
const { setFieldValue } = useFormikContext();
return (
<MyEditor {...field} {...props} onChange={val => {
setFieldValue(field.name, val)
}}/>
)
}
In an input element, handleChange function would receive the event object from the onChange event. How do I create a custom handleChange function for non-input fields like the following?
import React from 'react';
import { useFormik } from "formik";
const SomeForm = () =>
{
const { handleChange, handleSubmit, values } = useFormik({
initialValues: {
type: `company`, name: ``,
},
onSubmit: values => {
console.log(JSON.stringify(values, null, 2));
},
});
return (
<div>
<form onSubmit={ handleSubmit }>
<label>Type</label>
<ul>
<li className={ values.type === `company` && `active` }
onClick={() => handleChange(/* some custom handle change */)} >
Company
</li>
<li className={ values.type === `individual` && `active` }
onClick={() => handleChange(/* some custom handle change */)} >
Individual
</li>
</ul>
<label>Full Name</label>
<input type="text"
name="name"
value={ value.name }
onChange={ handleChange } />
</form>
</div>
)
};
export default SomeForm;
use setField('fieldName',value) method of form object provided in render props pattern of Field component.
I think this is what you're after. You can add your custom code after field.onChange(e).
// Custom field
const MyTextField = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<>
<input {...field} {...props}
onChange={e => {
// The original handler
field.onChange(e)
// Your custom code
console.log('I can do something else here.')
}}
className={ meta.error && 'is-invalid'}` } />
{meta.touched && meta.error && (
<div>{meta.error}</div>
)}
</>
);
};
And use it like so
<MyTextField name="entry" type="text" />
I am using react hooks and useRef to call a child method from the parent (see here: Call child method from parent)
Specifically, I am trying to call the formik submitForm method which is located in my child component from my parent component. I know there are other ways to do this (React Formik use submitForm outside <Formik />) but i would really like to use useRef.
const Auth1 = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
handleSubmit() {
///////////formik submitForm function goes here
}
}));
return(
<div>
<Formik
initialValues={props.initValues}
validationSchema={Yup.object().shape({
name: Yup.string().required('Required'),
})}
onSubmit={(values, actions) => {
console.log(values)
}}
render={({ values }) => (
<Form>
<Field
name="name"
value={values.name}
component={TextField}
variant="outlined"
fullWidth
/>
</Form>
)}
/>
</div>
)
})
There must be a way to bind the submitForm function out of the component and into the body of my Auth1 component, but imnot quite too sure how.
Any help is greatlly appreciated, thanks!
You can pull the handleSubmit function out of the useImperativeHandle call the exposed method from parent using ref
const Auth1 = forwardRef((props, ref) => {
const handleSubmit = (values, actions) => {
///////////formik submitForm function goes here
}
useImperativeHandle(ref, () => ({
handleSubmit
}), []);
return(
<div>
<Formik
initialValues={props.initValues}
validationSchema={Yup.object().shape({
name: Yup.string().required('Required'),
})}
onSubmit={handleSubmit}
render={({ values }) => (
<Form>
<Field
name="name"
value={values.name}
component={TextField}
variant="outlined"
fullWidth
/>
</Form>
)}
/>
</div>
)
})
Now from the parent you could have
const Parent = () => {
const authRef = useRef(null);
...
const callSubmit = () => {
authRef.current.handleSubmit(values, actions);
}
return (
<>
{/* */}
<Auth1 ref={authRef} />
</>
)
}