首页 > 解决方案 > React.PropTypes.func.isRequired 的问题

问题描述

我是 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;

标签: reactjsjsx

解决方案


根据您的 React 版本,PropTypes 可能位于不同的包中:https ://www.npmjs.com/package/prop-types

import PropTypes from 'prop-types';


SignUpForm.propTypes = {
    userSignUpRequest: PropTypes.func.isRequired
}

推荐阅读