我有一个容器组件和一个表单组件:
表单组件:
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传递来形成组件的。请帮我一个好的解决方案。
谢谢 :)