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

有一个基本的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>
      )}
    />

{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
}}
render={props=>(
其他输入。。。
提交
)}
/>

当其中的任何输入发生更改（不是提交，而是更改）时，我需要更新

之外的另一个组件。“外部”组件应接收所有表单数据

---

有没有办法不为表单的每个单独输入添加单独的更改处理程序？或者，解决方案是尝试在

内部插入“外部”组件？

Formik

提供

值

对象，您可以使用该对象获取外部值

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}>
            ...

const-App=（）=>{
const initialValues={email:''，颜色：'red'，名字：'}
常量[formValues，setformValues]=使用状态（初始值）；
const getFormData=值=>{
//在此处访问值
};
返回(
福米克把价值观带到外面
{props=>{
setformValues（props.values）；//将值存储在“formValues”状态
getFormData（props.values）；//或使用任何函数获取如下值
返回(
...

在codesandbox中运行演示

导出const LoginForm:React.FC=（）=>{
const initialValues={user:，password:}；
常量[formValues，setformValues]=React.useState（初始值）；
返回(
{formValues.user}
{
设置超时（（）=>{
//警报（JSON.stringify（值，null，2））；
resetForm（）；
设置提交（假）；
setformValues（值）；
}, 500);
}}
>
{({
价值观
错误，
感动的，
handleChange，
车把，
手推，
提交，
}) => {
返回(
连续的
)
}}
);
};

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。通过说明这是一个很好的问题解决方案的原因，A将极大地提高其长期价值，并使其对未来有其他类似问题的读者更为有用。请您的答案添加一些解释，包括您的假设艾德。

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>


    </>
  );
};