尝试导入错误：“HelpBlock”未从“react-bootstrap”导出

Question

我正在创建一个登录表单以响应检查登录参数，但是当我运行代码时，我抛出了这个异常：

Attempted import error: 'HelpBlock' is not exported from 'react-bootstrap'

import React, { Component } from "react";
import { Row, FormGroup, FormControl, Button, HelpBlock } from 'react-bootstrap';
import { isEmail, isEmpty, isLength, isContainWhiteSpace } from './validator';

class Login extends Component {

    render() {
        const { errors, formSubmitted } = this.state;

        return (
            <div className="Login">
                <Row>
                    <form onSubmit={this.login}>
                        <FormGroup controlId="email" validationState={ formSubmitted ? (errors.email ? 'error' : 'success') : null }>
                            <FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
                            {errors.email && <HelpBlock>{errors.email}</HelpBlock>}
                        </FormGroup>
                    </form>
                </Row>
            </div>
        )
    }
}

export default Login;

Answer 1

React bootstrap 没有 HelpBlock 组件。

我建议向您显示 Alert 组件中的错误，如下所示：

return (
  <div className="Login">
    <Row>
      <form onSubmit={this.login}>

        <FormGroup controlId="email" validationState={formSubmitted ? (errors.email ? 'error' : 'success') : null}>
          {errors.email && <span className="text-danger">{errors.email}</span>}
          <FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />

        </FormGroup>
        <FormGroup controlId="password" validationState={formSubmitted ? (errors.password ? 'error' : 'success') : null}>
          {errors.password && <span className="text-danger">{errors.password}</span>}
          <FormControl type="password" name="password" placeholder="Enter your password" onChange={this.handleInputChange} />
        </FormGroup>
        <Button type="submit" bsStyle="primary">Sign-In</Button>
      </form>
    </Row>
  </div>
)