代码之家 › 专栏 › 技术社区 › Lutaaya Huzaifah Idris

React.PropTypes.Func.IsRequired的问题

jsx reactjs

Lutaaya Huzaifah Idris · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

Sven van de Scheur 6 年前

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

import PropTypes from 'prop-types';


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

Estus Flask 6 年前

AS the documentation 国家,

React.propTypes自React v15.5以来已移动到不同的包中。请改用道具类型库。

已经导入:

import PropTypes from 'prop-types';

而组件仍在使用 React.PropTypes .

应该是:

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