reactjs - 属性 'isLoading' 在类型 'IntrinsicAttributes & IntrinsicClassAttributes> -Redux 表单中不存在

Question

我有一个容器组件和一个表单组件:

表单组件:

import * as React from 'react';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

export type LoginState = {
  email: string;
  password: string;
};

interface LoginProps extends InjectedFormProps {
  isLoading: boolean;
  onSubmit(userCredential: LoginState): void;
}

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props: LoginProps) {
    super(props);
    this.state = {
      email: '',
      password: '',
      otp: '',
    };
  }
  onEmailChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ email: e.currentTarget.value.trim() });
  };

  onPasswordChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ password: e.currentTarget.value.trim() });
  };

  onSubmit = () => {
    this.props.onSubmit(this.state);
  };

  render() {
    return (
      <div>
        <h3 className="ac-section__title">Login</h3>
        <div className="ac-section__body">
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="email"
              placeholder="Email"
              component={renderInput}
              type="email"
              value={this.state.email}
              onChange={this.onEmailChange}
              validate={[required, email]}
            />
            <Field
              name="password"
              placeholder="Password"
              component={renderInput}
              type="password"
              value={this.state.password}
              onChange={this.onPasswordChange}
              validate={required}
            />
            <br />
            <div className="loginBtnContainer">
              <button className="btn primaryButton" type="submit">
                Login
              </button>
            </div>
          </form>
          <div className="ac-password__wrapper">
            <Link to="/forgot-password" className="ac-password-link">
              Forgot your password?
            </Link>
          </div>
        </div>
      </div>
    );
  }
}

export default reduxForm({ form: 'loginForm' })(Login);

容器组件:

return (
      <div>
         <Login onSubmit={this.onSubmit} isLoading={true} />  
         /* here throwing error: Property 'isLoading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'. */

      </div>
    );

这里 isLoading 没有作为 props 传递给表单组件。请帮我想出一个好的解决方案。

谢谢:)

Answer 1

Redux Form是一种在 React + Redux 环境中进行表单处理和验证的非常有效的方法。在这里，您遇到的问题似乎与缺少 Prop 和一些接口(interface)定义有关。我在最后提供了一个沙箱。

一个解决方案可能是自己指定表单接口(interface)，像这样:

export interface FormInterface {
  handleSubmit: PropTypes.func; 
  handleChange?: PropTypes.func;
  reset?: PropTypes.func;
  pristine?: PropTypes.bool;
  submitting?: PropTypes.bool;
  error?: PropTypes.bool;
  invalid?: PropTypes.bool;
  submitSucceeded?: PropTypes.bool;
  submitFailed?: PropTypes.bool;
  anyTouched?: PropTypes.bool;
}

并使用它来派生 LoginProps。然后 typescript 不会提示缺少 Prop ，这显然是 redux 表单的工作方式。

查看此 sandbox了解详情。我也为您介绍了一些小问题。

希望这对您有所帮助。