Super expression must either be null or a function

发布于 2022-09-06 04:00:55 字数 5457 浏览 26 评论 0

初学ReactJS,在使用react-bootstrap-validation,遇到Uncaught TypeError: Super expression must either be null or a function, not undefined的问题,求解。

使用demo代码链接描述

具体代码如下:

import React from 'react';

import { ButtonInput } from 'react-bootstrap';

// Import Form and ValidatedInput components. Notice that you need to use
// this ValidatedInput component instead of the original one to have
// validation and other features working
import { Form, ValidatedInput } from 'react-bootstrap-validation';

// There's also a wrapper for radio inputs that react-bootstrap
// doesn't (yet) have
import { Radio, RadioGroup } from 'react-bootstrap-validation';
class Certification extends React.Component {

    constructor(props) {
    super(props);

    this.state = {
      
    };
  }

    render() {
        return (
            <Form
                // Supply callbacks to both valid and invalid 
                // submit attempts 
                onValidSubmit={this._handleValidSubmit.bind(this)}
                onInvalidSubmit={this._handleInvalidSubmit.bind(this)}>
 
                <ValidatedInput
                    type='text'
                    label='Email'
                    // Each input that you need validated should have 
                    // the "name" prop 
                    name='email'
                    // Validation rules separated with comma 
                    validate='required,isEmail'
                    // Error messages for each error type 
                    errorHelp={{
                        required: 'Please enter your email',
                        isEmail: 'Email is invalid'
                    }}
                />
 
                <ValidatedInput
                    type='password'
                    name='password'
                    label='Password'
                    // You can pass params to validation rules 
                    validate='required,isLength:6:60'
                    errorHelp={{
                        required: 'Please specify a password',
                        isLength: 'Password must be at least 6 characters'
                    }}
                />
 
                <ValidatedInput
                    type='password'
                    name='password-confirm'
                    label='Confirm Password'
                    // Validate can be a function as well 
                    validate={(val, context) => val === context.password}
                    // If errorHelp property is a string, then it is used 
                    // for all possible validation errors 
                    errorHelp='Passwords do not match'
                />
 
                {/* Custom component to supply a couple of bootstraps
                    wrappers around radio inputs to look pretty */}
                <RadioGroup name='radio'
                            value='3'
                            label='Which one is better?'
                            // Supports validation as well 
                            validate={v => v === 'cola'}
                            errorHelp='Pepsi? Seriously?'
                            // And accepts (almost) all the same props 
                            // as other react-bootstrap components 
                            labelClassName='col-xs-2'
                            wrapperClassName='col-xs-10'>
                    {/* Radio is a simple wrapper around react-bootstrap's
                        Input component */}
                    <Radio value='cola' label='Cola' />
                    <Radio value='pepsi' label='Pepsi' />
                </RadioGroup>
 
                <ValidatedInput
                    type='checkbox'
                    name='agree'
                    label='I agree to the terms and conditions'
                    // Validation rules is easily extendable to fit 
                    // your needs. There are only two custom rules, 
                    // 'isChecked' and 'required', others are stock 
                    // validator.js methods 
                    validate='isChecked'
                />
 
                <ButtonInput
                    type='submit'
                    bsSize='large'
                    bsStyle='primary'
                    value='Register'
                />
            </Form>
        );
    }

    _handleValidSubmit(values) {
        // Values is an object containing all values 
        // from the inputs 
    }
 
    _handleInvalidSubmit(errors, values) {
        // Errors is an array containing input names 
        // that failed to validate 
    }
   
}

export default Certification;

浏览器报错如下
inherits.js:9 Uncaught TypeError: Super expression must either be null or a function, not undefined

at exports.default (inherits.js:9)
at ValidatedInput.js:26
at Object.<anonymous> (ValidatedInput.js:59)
at __webpack_require__ (bootstrap ac8123887a1b45c2e21c:19)
at Object.<anonymous> (Form.js:33)
at __webpack_require__ (bootstrap ac8123887a1b45c2e21c:19)
at Object.<anonymous> (index.js:9)
at __webpack_require__ (bootstrap ac8123887a1b45c2e21c:19)
at Object.defineProperty.value (certification.jsx:8)
at __webpack_require__ (bootstrap ac8123887a1b45c2e21c:19)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文