如何使用Reactstrap在React中构建表单

来自菜鸟教程
跳转至：导航、​搜索

介绍

Reactstrap 提供了预构建的 Bootstrap 4 组件，允许极大的灵活性和预构建的验证。 这使我们能够快速构建精美的表单，保证给人留下深刻印象并提供直观的用户体验。

在本教程中，您将使用 Reactstrap 在 React 应用程序中构建登录表单。

先决条件

  • Node.js 的本地开发环境。 关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。
  • 对 React 有一定的了解。 你可以阅读我们的 如何在 React.js 系列中编码。
  • 对 Bootstrap 4 有一定的了解。 你可以阅读官方的 Bootstrap 4.6 文档。

本教程已使用 Node v16.2.0、npm v7.14.0、react v17.0.2、reactstrap v8.9.0 和 bootstrap v4 进行了验证。 6.0。

第 1 步 — 设置项目

首先使用 create-react-app 生成 React App，然后安装依赖项： 

npx create-react-app reactstrap-example

切换到新的项目目录： 

cd reactstrap-example

现在，您可以运行 React 应用程序： 

npm start

修复项目的任何错误或问题。 并在网络浏览器中访问 localhost:3000。

一旦你有一个工作的 React 应用程序，你可以安装 reactstrap： 

npm install reactstrap@8.9.0

然后，您可以安装 bootstrap： 

npm install bootstrap@4

注意： 在使用 Reactstrap 时，指定 Bootstrap 的 4.x 版本很重要，以便安装兼容版本。 不指定版本将安装当前为 5.x 的最新版本的 Bootstrap。


接下来，在代码编辑器中打开 src/index.js 文件。 添加以下行以在项目中使用 Bootstrap 样式：

src/index.js 

import 'bootstrap/dist/css/bootstrap.min.css';

此时，您将拥有一个新的 React 应用程序，其中包含 Reactstrap 和 Bootstrap 的依赖项。

第 2 步 — 使用表单组件

Reactstrap 允许我们预先构建 Form 组件，包括从标准文本 Input 到更高级的文件上传 Input 的任何内容。

首先，从 reactstrap 导入 Components。 在此示例中，我们将导入 Button、Form、FormGroup、Input 和 Label 以直接在我们的登录中使用形式。 

import {
  Button,
  Form,
  FormGroup,
  Input,
  Label
} from 'reactstrap';

现在我们有了所需的组件，让我们构建表单。

Reactstrap 接受 props 例如 type、name、id 和 placeholder。

  • type 定义输入的类型，例如文件上传、单选按钮，甚至更具体的文本输入，例如电子邮件。
  • name 是最终发送到我们后端的键值对的键。
  • id 是我们在操作 DOM 时使用的。
  • placeholder 允许我们在输入中添加示例文本。

在代码编辑器中打开 App.js 并添加以下代码行：

src/App.js 

import { Component } from 'react';
import {
  Button,
  Form,
  FormGroup,
  Input,
  Label
} from 'reactstrap';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Sign In</h2>
        <Form className="form">
          <FormGroup>
            <Label for="exampleEmail">Username</Label>
            <Input
              type="email"
              name="email"
              id="exampleEmail"
              placeholder="example@example.com"
            />
          </FormGroup>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              id="examplePassword"
              placeholder="********"
            />
          </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

export default App;

然后，在您的代码编辑器中打开 App.css 并将其替换为以下样式：

应用程序.css 

.App {
  border: 2px solid #d3d3d3;
  border-radius: .5em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding: 1em;
  text-align: left;
  width: 600px;
}

.form {
  padding: 1em;
}

label {
  font-weight: 600;
}

保存更改并在 Web 浏览器中观察应用程序：

Reactstrap 提供了多种内置方式来设置表单组件的样式。 以下是一些可能派上用场的关键项目：

  • 颜色：Reactstrap 在使用 has-success 等 className 时支持 Bootstrap 的内置颜色。
  • 内联表单：在 <Form> 中，我们可以添加 <Form inline> 将 Label 和 Input 放在同一行。
  • 容器、行和列：<Col> 是 Reactstrap 对 Bootstrap 列的包装器。 这使我们不仅可以格式化台式机，还可以格式化手机和平板电脑。

此时，您拥有一个带有使用 Bootstrap 样式的登录表单的 React 应用程序。

第 3 步 — 添加验证和用户提示

FormText 允许我们在字段上方或下方添加额外的指示符文本。

对于此示例，“用户名”字段将需要电子邮件地址形式的值。 添加了 FormText 以告知用户预期值。 

<FormText>Your username is most likely your email.</FormText>

保存更改并在 Web 浏览器中观察应用程序：

在将 FormFeedback 添加到此示例之前，您需要管理状态： 

constructor(props) {
  super(props);
  this.state = {
    email: '',
    validate: {
      emailState: '',
    },
  };
}

render() {
  const { email } = this.state;
  // ...
}

并处理表单的更改： 

constructor(props) {
  super(props);
  // ...
  this.handleChange = this.handleChange.bind(this);
}

handleChange = (event) => {
  const { target } = event;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const { name } = target;

  this.setState({
    [name]: value,
  });
};

FormFeedback 立即验证字段。 您可以灵活地自定义输入验证。 使用 Regex 添加一个函数来验证 onChange 事件上的电子邮件，并将 has-success 或 has-danger 设置为状态。 

validateEmail(e) {
  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  const { validate } = this.state;

  if (emailRegex.test(e.target.value)) {
    validate.emailState = 'has-success';
  } else {
    validate.emailState = 'has-danger';
  }

  this.setState({ validate });
}

警告： 有一个用于验证电子邮件地址的标准规范。 这个简化的正则表达式仅用于教程目的。


要将其应用于您的 Input，请添加 valid 道具和您的条件： 

valid={ this.state.validate.emailState === 'has-success' }

以及带有条件的 invalid 道具： 

invalid={ this.state.validate.emailState === 'has-danger' }
/>

创建一个 FormFeedback 默认显示失败文本： 

<FormFeedback>
  Uh oh! Looks like there is an issue with your email. Please input a correct email.
</FormFeedback>

使用 valid 属性创建第二个 FormFeedback 以显示成功文本： 

<FormFeedback valid>
  That's a tasty looking email you've got there.
</FormFeedback>

然后，将 value、validateEmail 和 handleChange 添加到 Input 中： 

<Input
  type="email"
  name="email"
  id="exampleEmail"
  placeholder="example@example.com"
  valid={ this.state.validate.emailState === 'has-success' }
  invalid={ this.state.validate.emailState === 'has-danger' }
  value={ email }
  onChange={ (e) => {
                      this.validateEmail(e);
                      this.handleChange(e);
                    } }
/>

当用户输入错误的用户名时，用户将收到 has-danger 样式的反馈：

当用户正确输入用户名时，用户将获得 has-success 样式的反馈：

现在，您的表单使用 FormText、FormFeedback 和验证。

第 4 步 — 提交表格

最后，在提交时，我们通常会将数据提交到我们的数据库，但在我们的示例中，我们将使用 submitForm 函数控制台记录电子邮件。 

submitForm(e) {
  e.preventDefault();
  console.log(`Email: ${ this.state.email }`);
}

所有部件都准备好后，App.js 将类似于以下内容：

src/App.js 

import { Component } from 'react';
import {
  Form,
  FormFeedback,
  FormGroup,
  FormText,
  Label,
  Input,
  Button,
} from 'reactstrap';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      validate: {
        emailState: '',
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    const { target } = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const { name } = target;

    this.setState({
      [name]: value,
    });
  };

  validateEmail(e) {
    const emailRex =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    const { validate } = this.state;

    if (emailRex.test(e.target.value)) {
      validate.emailState = 'has-success';
    } else {
      validate.emailState = 'has-danger';
    }

    this.setState({ validate });
  }

  submitForm(e) {
    e.preventDefault();
    console.log(`Email: ${this.state.email}`);
  }

  render() {
    const { email, password } = this.state;

    return (
      <div className="App">
        <h2>Sign In</h2>
        <Form className="form" onSubmit={(e) => this.submitForm(e)}>
          <FormGroup>
            <Label>Username</Label>
            <Input
              type="email"
              name="email"
              id="exampleEmail"
              placeholder="example@example.com"
              valid={this.state.validate.emailState === "has-success"}
              invalid={this.state.validate.emailState === "has-danger"}
              value={email}
              onChange={(e) => {
                this.validateEmail(e);
                this.handleChange(e);
              }}
            />
            <FormFeedback>
              Uh oh! Looks like there is an issue with your email. Please input
              a correct email.
            </FormFeedback>
            <FormFeedback valid>
              That's a tasty looking email you've got there.
            </FormFeedback>
            <FormText>Your username is most likely your email.</FormText>
          </FormGroup>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              id="examplePassword"
              placeholder="********"
              value={password}
              onChange={(e) => this.handleChange(e)}
            />
          </FormGroup>
          <Button>Submit</Button>
        </Form>
      </div>
    );
  }
}

export default App;

结论

在本教程中，您使用 Reactstrap 在 React 应用程序中构建了一个登录表单。 这允许您使用带有 React 组件的 Bootstrap 4 元素进行构建。

如果您想了解有关 React 的更多信息，请查看 我们的 React 主题页面 以获取练习和编程项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用Reactstrap在React中构建表单&oldid=26457”
Powered by MediaWiki