有一个基本的Formik表单:
<Formik
initialValues={{ email: '', color: 'red', firstName: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
render={props => (
<form onSubmit={props.handleSubmit}>
<Field type="email" name="email" placeholder="Email" />
<div>other inputs ... </div>
<button type="submit">Submit</button>
</form>
)}
/>
其中的任何输入发生更改(不是提交而是更改)时-我需要更新<Formik />
之外的另一个组件。 “外部”组件应接收所有表单数据。
是否有某种方法可以为表单的每个单独输入添加单独的更改处理程序而无需添加?还是解决方法是尝试在<Formik />
内插入“外部”组件?
答案 0 :(得分:1)
Formik
提供了values
对象,您可以利用该对象获取外部值。
const App = () => {
const initialValues = { email: '', color: 'red', firstName: '' }
const [formValues, setformValues] = useState(initialValues);
const getFormData = values => {
// access values here
};
return (
<div>
<h1>Formik take values outside</h1>
<Formik
initialValues={initialValues}
...
>
{props => {
setformValues(props.values); // store values in state 'formValues'
getFormData(props.values); // or use any function to get values like this
return (
<form onSubmit={props.handleSubmit}>
...
使用代码和框 here
中的工作演示答案 1 :(得分:0)
export const LoginForm: React.FC<Values> = () => {
const initialValues = { user: "", password: "" };
const [formValues, setformValues] = React.useState(initialValues);
return (
<div>{formValues.user}</div>
<Formik
initialValues={initialValues}
validationSchema={ValidationSchema}
onSubmit={(values, { setSubmitting, resetForm }) => {
setTimeout(() => {
//alert(JSON.stringify(values, null, 2));
resetForm();
setSubmitting(false);
setformValues(values);
}, 500);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => {
return (
<>
<TextField
label="Usuario"
name="user"
value={values.user}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
color={touched.user && errors.user ? "primary" : "secondary"}
/>
<Error touched={touched.user} message={errors.user} />
</>
<div className="pane-form__submit">
<Button
className={classes.customHoverFocus}
variant="contained"
type="submit"
disabled={isSubmitting}
label="CONTINUAR"
>Continuar</Button>
</div>
</Form>
)
}}
</Formik>
</>
);
};