Redux 表单无法输入

Question

我无法输入redux form的文本输入法。这是一个非常简单的形式

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 上搜索一些答案，但我没有找到答案。

你能告诉我错误在哪里吗？谢谢。

Answer 1

首先尝试处理事件

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

之后尝试在函数 onsubmit 中使用 this 并删除 const

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

Answer 2

所以试一试，让我们把 enhance 排除在外，老实说我不知道它的作用所以让我们试试这种类型的登录配置，我们将组件变成 class-based 一个无论如何，这是一个很好的做法，因为您正在接收用户的输入。

我知道您正在使用 useState，这是 React 的一些很酷的新功能，但我建议将一个不那么复杂和传统的设置与 class-based 组件放在一起像这样：

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);

使用它来检查您现在是否可以输入您的输入，然后开始重新添加内容并每次测试它，直到找到问题的原因。

Answer 3

经过几个小时和一个特别的错误修复之夜后，我发现了问题：

它在一次导入中，正好：

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

而不是

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

这是完全出乎意料的，我很确定错误是在组件的主体中，而不是在导入中。

文件结构没问题。

Redux 表单无法输入

Redux form cannot type

reactjs

redux

redux-form