Redux 表单无法输入答案

【问题标题】：Redux form cannot typeRedux 表单无法输入
【发布时间】：2019-10-21 19:33:33
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

所以试一试，让我们离开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);

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

【讨论】：

【解决方案2】：

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

它是在一次导入中，确切地说：

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

而不是

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

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

文件的结构没问题。

【讨论】：

【解决方案3】：

尝试先处理事件

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

【讨论】：

您好，感谢您的帮助：如果我尝试仅在 onSubmit 上启动，我可以在其中看到 console.log（具有未定义的值）。但我无法在文本输入中输入任何内容