当Formik表单更改时更新另一个组件
it1352
帮助12人
问题说明
有一个基本的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 />之外的另一个组件。"Outside"组件应接收所有表单数据。
有什么方法可以做到这一点，而不需要为表单的每个单独输入添加单独的更改处理程序吗？或者解决方案是尝试在<Formik />内部插入"外部"组件？
正确答案
#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}>
...
Codesandbox中的工作演示here
这篇好文章是转载于：学新通技术网
