Redux 表单无法输入

Posted 2023-02-19

【中文标题】Redux 表单无法输入

【英文标题】：Redux form cannot type

【发布时间】：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 上搜索一些答案，但我没有找到答案。

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

【参考方案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（具有未定义的值）。但我无法在文本输入中输入任何内容