Redux форма не может печатать - PullRequest
Новая
       26

Redux форма не может печатать

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

Я не могу набрать текстовый ввод в виде избыточной формы. это очень минимальная форма 

function Login({ handleSubmit, handleChange }) {
  const [username, setUsername] = useState(undefined);
  const [password, setPassword] = useState(undefined);

  const onSubmit = (e) => {
    console.log(e);
    console.log(username);
    console.log(password);
  };

  console.log(handleSubmit);
  return (
    <Container>
      <div className={styles.centered}>
        <div className={styles.form}>
          <div className={styles.title}>
            <H3>Login</H3>
          </div>
          <form onSubmit={() => handleSubmit(onSubmit)} className={styles.flexColumn}>

            <div className={styles.username}>
              <P>username</P>
              <Field name="username" component="input" type="text" className={styles.input} />
            </div>

            <div className={styles.password}>
              <P>password</P>
              <Field name="password" component="input" type="password" className={styles.input} />
            </div>

            <div className={styles.downSection}>
              <Flex>
                <P>
                Serve Aiuto?
                </P>
                <a href="#">
                  <div className={styles.contactLink}>
                    <P>Contattaci</P>
                  </div>
                </a>
              </Flex>
              <Button type="submit" text="Accedi" />
            </div>
          </form>
        </div>
      </div>
    </Container>
  );
}

const mapDispatchToProps = {
  login: loginAction,
};

const enhance = compose(
  connect(null, mapDispatchToProps),
  reduxForm({ form: 'login' }),
);

export default enhance(Login);

handleSubmit не работает, я не могу console.log ничего. Я пытался просмотреть документацию и попытался найти какой-то ответ на SO, но я не нашел ответа.

Не могли бы вы сказать мне, где ошибка? спасибо.

Ответы [ 3 ]

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

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

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

class Login extends Component {
  render() {
    return (
      <form>
        <fieldset>
          <label>Email</label>
          <Field
            name="email"
            type="text"
            component="input"

          />
        </fieldset>
        <fieldset>
          <label>Password</label>
          <Field
            name="password"
            type="password"
            component="input"

          />
        </fieldset>
      </form>
    );
  }
}

export default reduxForm({ form: "login" })(Login);

Используйте это, чтобы проверить, можете ли вы теперь ввести свои данные, а затем начать добавлять материал обратно и проверять его каждый раз, пока не найдете причину проблемы.

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

после нескольких часов и специальной ночи исправления ошибок я обнаружил проблему:

это было в одном импорте, а именно: 

import { Field, reduxForm } from 'redux-form/immutable';

, а не 

import { Field, reduxForm } from 'redux-form';

это было совершенно неожиданно, я был почти уверен, что ошибка была в теле компонента, а не в импорте.

структура файла была в порядке.

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

Попробуйте сначала обработать событие 

 <form onSubmit={onSubmit} className={styles.flexColumn}>

после этого попробуйте использовать this в функции onsubmit и удалите const 

 onSubmit(event){
console.log(e);
console.log(username);
console.log(password);
   this.handleSubmit(event.target.value);
  };
...