属性 'isLoading' 不存在于类型 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>> -Redux 表单

IT技术 reactjs typescript redux-form typescript-typings typescript2.0
2021-05-15 12:05:24

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

表单组件:

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传递来形成组件的。请帮我一个好的解决方案。

谢谢 :)

1个回答

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

一个解决方案可能是自己指定表单界面,如下所示:

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不会抱怨缺少props,这显然是 redux 表单的工作方式。

有关详细信息,请参阅此沙箱我也为你解决了一些小问题。

希望这可以帮助。