实时响应formik读取<formik>外部的输入值

时间:2019-03-11 01:45:34

标签: reactjs formik

这是代码https://codesandbox.io/s/5wmrp396kp

我不知道如何读取。外部的值。

我只需要一个非常简单的函数来显示其他组件(例如helper.js)中的值

class ComponentOne extends Component {
  render() {
    return (
      <React.Fragment>
        <div>CompoenntOne: I wannna read the props.values.email here</div>
        <div>CompoenntOne: I wannna read the props.values.email2 here</div>
      </React.Fragment>
    );
  }
}

有什么方法可以使这项工作变得简单?

1 个答案:

答案 0 :(得分:-2)

您的代码甚至都没有包含Formik组件。

请从docs实现以下基本示例:

import React from 'react';
import { Formik } from 'formik';

const BasicExample = () => (
  <div>
    <h1>My Form</h1>
    <Formik
      initialValues={{ name: 'jared' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <input
            type="text"
            onChange={props.handleChange}
            onBlur={props.handleBlur}
            value={props.values.name}
            name="name"
          />
          {props.errors.name && <div id="feedback">{props.errors.name}</div>}
          <button type="submit">Submit</button>
        </form>
      )}
    />
  </div>
);