当Formik表单更改时更新另一个组件

原学程将引见当Formik表单变动时革新另外一个组件的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

有1个根本的Formik表单：

<Formik
initialValues={{ email: '', color: 'red', firstName: '' }}
onSubmit={(values, actions) => {
  setTimeout(() => {
 alert(JSON.stringify(values, null, 二));
 actions.setSubmitting(false);
  }, 一000);
}}
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"组件应吸收一切表双数据。

有甚么办法不妨做到这1面，而没有须要为表单的每一个零丁输出添减零丁的变动处置法式吗？或许处理计划是测验考试在<Formik />外部拔出"内部"组件？

推举谜底

Formik供给可用于夺取内部值的values对于象。

const App = () => {
  const initialValues = { email: '', color: 'red', firstName: '' }

  const [formValues, setformValues] = useState(initialValues);

  const getFormData = values => {
 // access values here
  };
  return (
 <div>
<h一>Formik take values outside</h一>
<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

佳了闭于当Formik表单变动时革新另外一个组件的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。