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未作为道具传递以形成组件。请帮我解决一个好的解决方案。

谢谢：）

Answer 1

Redux Form是React + Redux环境中表单处理和验证的一种非常有效的方法。这里你遇到的问题看起来是关于缺少道具和一些接口定义。我最后提供了一个沙盒。

解决方案可以是自己指定表单界面，如下所示：

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。然后打字稿不会抱怨丢失的道具，这显然是redux形式的工作方式。

有关详细信息，请参阅此sandbox。我也为你做了一些小事。

希望这有帮助。

属性'isLoading'在类型'IntrinsicAttributes＆amp; IntrinsicClassAttributes <forminstance <{}，partial <configprops <{}，=“”{} =“”>＆gt; -Redux表格

1 个答案: