问题描述
有一个基本的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 />内部插入"外部"组件?推荐答案
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