如何在 ReactJS 中围绕 Bootstrap 表单绘制边框？

Question

我是 JavaScript 和 ReactJS 的新手。

我想得到什么

我想创建一个具有以下布局的页面：

.

如您所见，两种形式都有边框。这就是我想要的实现（在注册表单上加边框）

我做了什么来实现结果

我根据 this tutorial 创建了一个简单的 NodeJS/React 应用程序。

然后我这样定义入口页面（将包含两种形式的页面）：

import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignUpForm from './SignUpForm';

class EntryPage extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <h1>CTR Predictor</h1>
          <p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p>
        </Jumbotron>
        <Row>
          <Col xs={6} md={3}><SignUpForm /></Col>
          <Col xs={6} md={6}>Place for the login form</Col>
        </Row>
      </div>
    )
  }
}

export default EntryPage;

SignUpForm定义如下

import React, { Component } from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import style from './style';

class SignUpForm extends Component {
  render() {
    return (
      <div class="signUpForm">
        <form>
          <FormGroup
            controlId="formBasicText"
          >
            <ControlLabel>Working example with validation</ControlLabel>
            <FormControl
              type="text"
              placeholder="Enter text"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
            <HelpBlock>Validation is based on string length.</HelpBlock>
          </FormGroup>
        </form>
      </div>
    )
  }
}

export default SignUpForm;

style.js 与上述文件位于同一目录并包含以下内容：

const style = {
  signUpForm: {
    border:'2px solid #000000',
  }
}

module.exports = style;

当我运行申请时，注册表单周围没有边框。

我尝试修复的错误

我试图在 FormGroup 的声明中添加 bsClass='signUpForm'（建议 here） SignUpForm，但没有帮助。

如何修复此错误（确保显示表单周围的边框）？

Answer 1

首先，我会将样式的导入更改为此 import {signUpForm} from ./style 和此

  <div class="signUpForm">

改成这个

  <div style={signUpForm}>

但是重要的是，你正在使用反应，因此你不能写class，反应使用className="name-of-class"

您正在导出样式，而不是 css，因此您需要在样式属性而不是 class名称中使用它。

如何在 ReactJS 中围绕 Bootstrap 表单绘制边框？

How to draw a border around a Bootstrap form in ReactJS?

reactjs

react-bootstrap