reactjs - 'isLoading' özelliği 'IntrinsicAttributes & IntrinsicClassAttributes>>>' tipinde mevcut değil - Redux formu

Bir konteyner bileşimim ve bir form bileşimim var:

Form bileşeni:

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

Kapsayıcı bileşen:

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

      </div>
    );

burada isLoading form bileşenine props olarak geçmiyor. lütfen bana iyi bir çözümle yardımcı olun.

Teşekkürler :)

Cevap #1

Redux Form, React + Redux ortamlarında form yönetimi ve doğrulama için çok verimli bir yaklaşımdır. Buradaki sorun, eksik props ve birkaç arayüz tanımıyla ilgili görünüyor. Sonunda bir sandbox sağladım.

Bir çözüm, form arayüzünü kendiniz belirtmek olabilir, şöyle bir şey:

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

ve bunu LoginProps'u türetmek için kullan. Sonra TypeScript eksik özellikler hakkında şikayet etmeyecek, bu görünüşe göre redux formun çalışma şekli.

Detaylar için bu sandbox'a bakın. Sizin için birkaç küçük şeyi de gözden geçirdim.

Umarım bu yardımcı olur.

İlgili makaleler