我是 React 的新手并试图定义 PropTypes,但似乎不再有效:
以下是我如何使用它:
React.PropTypes.func.isRequired
然后这是我缺少的组件:
import React, {Component} from 'react';
import {Input,Icon,Row,Card, Button} from 'react-materialize'
import '../css/signup.css'
import PropTypes from 'prop-types';
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {username: '', email:'', password:'', confirm_password:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.username});
this.setState({email: event.target.email});
this.setState({password: event.target.password});
this.setState({confirm_password: event.target.confirm_password});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignUpRequest(this.state);
}
render() {
return (
<div>
<Card className="card-effects right">
<form className="card-form-signup" onSubmit={this.handleSubmit}>
<Row>
<label className="signup-header"><b>Signup to Authors Haven</b></label>
</Row>
<Row>
<Input s={12} placeholder="Username" value={this.state.username} onChange={this.handleChange} validate>
<Icon className="icon-styles">account_box</Icon></Input>
</Row>
<Row>
<Input s={12} type='email' value={this.state.email} onChange={this.handleChange} placeholder="Email" validate><Icon className="green darken-4">email</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' placeholder="Password" value={this.state.password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<label >Already have an account ? </label>
</Row>
<Row>
<Button className='button-effects' type="submit" value="Submit" > Signup </Button>
</Row>
</form>
</Card>
</div>
);
}
}
SignUpForm.propTypes = {
userSignUpRequest: React.PropTypes.func.isRequired
}
export default SignUpForm;