Как передать реквизит от класса «Реакция» до «Формика»? - PullRequest
Новая
       17

Как передать реквизит от класса «Реакция» до «Формика»?

0 голосов
/ 13 июня 2019

Я пытаюсь передать некоторые реквизиты из класса React моему функциональному компоненту, который является formik, и затем я хочу добавить некоторую функцию обратного вызова, чтобы эти данные вернулись в измененный текст. Но не уверен, как я могу сделать это. Пожалуйста, проверьте мой код ниже:

Вот мой класс Main.jsx 

// Some imports were removed to keep everything looks cleaner
import RegisterAccount from "RegisterAccount.jsx";

class Main extends React.Compoenent {

     constructor(props) {
          super(props);

          this.state = {
             username: "This is username value..."
          }
     }

    render() {
        return (
            <Container fluid>
              <Switch>
                <Route exact path="/register" component={RegisterAccount} data={this.state.username} />
              </Switch>
            </Container>
        )
    }
}

export default Main;

Вот мой RegisterAccount.jsx 

// Some imports were removed to keep everything looks cleaner
import { Form as FormikForm, Field, withFormik } from "formik";
import * as Yup from "yup";

const App = ({ values, errors, touched }) => (
  <FormikForm className="register-form  " action="">
    <h3 className="register-title">Register</h3>
    <Form.Group className="register-form-group">
      <Field
        name="username"
        type="text"
        placeholder="USERNAME"
        className="form-control rounded register-form-control"
      />
      {touched.username && errors.username && <p>{errors.username}</p>}
    </Form.Group>
  </FormikForm>
);

const FormikApp = withFormik({
  mapPropsToValues({ username, email, password, confirmPassword }) {
    return {
      username: username || ""
    };
  },
validationSchema: Yup.object().shape({
    username: Yup.string()
      .min(6)
      .max(32)
      .required()
      .test("username", "error message of username", async value => {
        return true;
      })
})(App);


export default FormikApp;

1 Ответ

1 голос
/ 13 июня 2019

Похоже, проблема возникает не с Formik, а с React Router. Ваш Route не будет передавать реквизиты как data так, как у вас есть: 

<Route exact path="/register" component={RegisterAccount} data={this.state.username} />

Вместо этого вы должны использовать Route render prop и передавать реквизиты непосредственно в компонент. Это должно передать username в mapPropsToValues: 

<Route exact path="/" render={() => <RegisterAccount username={this.state.username} />} />
...