如何使用 React Bootstrap 和 Redux

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

介绍

Bootstrap 是最流行的 CSS 框架，互联网上有超过一百万个网站使用它。因此，我们必须知道如何将这个优秀的 CSS 框架与我们最喜欢的 JavaScript 前端堆栈 — React 和 Redux 集成。

将 Bootstrap 添加到您的应用的一种方法是使用 CDN 链接。但幸运的是，已经有一个 npm 库可以解决我们的问题。

React-Bootstrap

React-Bootstrap 是最流行的前端框架。它为 React.js 重新构建，也就是说，它完全取代了 Bootstrap Javascript。React-Bootstrap 是一个 npm 包，它为 React 完全重新实现了 Bootstrap 组件，并且不依赖于JQuery。它使用状态来指导 DOM 操作，这使得该包在 React 世界中更加可靠。

安装 React-Bootstrap

要安装react-bootstrap，请在终端中运行以下命令。

      npm install react-bootstrap bootstrap

注意：运行该命令之前，请确保您的系统中已安装节点。

例子

对于本指南，我们将使用React Bootstrap 文档中的<LoginForm />组件并使用 Redux 验证字段。

登录表单组件

我们将从react-bootstrap导入<Form />和<Button />组件，并在我们的<LoginForm />组件中使用它们。

      import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const LoginForm = () => (
  <Form>
    <h2>Login</h2>
    <hr />
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Email address</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text className="text-muted">
        We'll never share your email with anyone else.
      </Form.Text>
    </Form.Group>

    <Form.Group controlId="formBasicPassword">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
    </Form.Group>
    <Form.Group controlId="formBasicCheckbox">
      <Form.Check type="checkbox" label="Check me out" />
    </Form.Group>
    <Button variant="primary" type="button">
      Submit
    </Button>
  </Form>
);

export default LoginForm;
    

建立商店

在全局存储对象中，我们将存储形式的值和错误。

      const initialState = {
  loginForm: {
    values: {
      email: "",
      password: ""
    },
    errors: {
      email: "",
      password: ""
    }
  }
};

export default (state = initialState, action) => {
  if (action.type === "FORM_SUBMIT") {
    const { email, password } = action.payload;
    const values = {
      email,
      password
    };
    const errors = {}; // validate fields
    return {
      loginForm: {
        values,
        errors
      }
    };
  }
  return state;
};
    

为了验证字段，我们将编写一个validateEmail（）函数来检查用户输入的电子邮件是否有效以及密码是否至少有8个字符。

      function validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
  return re.test(String(email).toLowerCase());
}

const setErrors = (email, password) => {
  let errors = { email: "", password: "" };
  if (!email && email.length === 0) {
    errors.email = "Email is required";
  } else if (!validateEmail(email)) {
    errors.email = "Email is invalid";
  }
  if (!password && password.length === 0) {
    errors.password = "Password is required";
  } else if (password.length < 8) {
    errors.password = "Password must have 8 characters";
  }
  return errors;
};

// ...

export default (state = initialState, action) => {
  if (action.type === "FORM_SUBMIT") {
    const { email, password } = action.payload;
    const values = {
      email,
      password
    };
    const errors = setErrors(email, password); // validate fields
    return {
      loginForm: {
        values,
        errors
      }
    };
  }
  return state;
};
    

使用 Provider 包装根组件

为了使所有组件都可以访问存储，我们需要使用react-redux包中的<Provider />组件包装根组件。

另请注意，必须在根组件中导入 bootstrap CSS，以便将样式应用到组件。

      import "bootstrap/dist/css/bootstrap.min.css";
import Card from "react-bootstrap/Card";
import { Provider } from "react-redux";
import { createStore } from "redux";

import reducer from "./reducer";

import LoginForm from "./LoginForm";

const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Card body>
          <LoginForm />
        </Card>
      </div>
    </Provider>
  );
}
    

使用 Redux 连接组件

首先，我们必须使其成为受控组件——也就是说，表单数据必须由组件的内部状态控制。

      import React, { useState } from "react";

const LoginForm = props => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <Form>
      <h2>Login</h2>
      <hr />
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          onChange={e => setEmail(e.target.value)}
        />
        <Form.Control.Feedback type="invalid">
          {props.loginForm.errors.email}
        </Form.Control.Feedback>
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          placeholder="Password"
          onChange={e => setPassword(e.target.value)}
        />
        <Form.Control.Feedback type="invalid">
          {props.loginForm.errors.password}
        </Form.Control.Feedback>
      </Form.Group>
      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="button">
        Submit
      </Button>
    </Form>
  );
};
    

我们在之前的指南[/guides/change-page-background-color-each-route]中讨论过 React hooks。Hooks 是 Redux 提供的现代 API，用于管理功能组件中的状态。

接下来，我们将使用connect()方法将表单连接到 Redux 。

      // ...
import { connect } from "react-redux";

const LoginForm = props => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <Form>
      <h2>Login</h2>
      <hr />
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          isInvalid={props.loginForm.errors.email.length > 0}
          isValid={
            props.loginForm.values.email &&
            props.loginForm.errors.email.length === 0
          }
          onChange={e => setEmail(e.target.value)}
        />
        <Form.Control.Feedback type="invalid">
          {props.loginForm.errors.email}
        </Form.Control.Feedback>
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          placeholder="Password"
          isInvalid={props.loginForm.errors.password.length > 0}
          isValid={
            props.loginForm.values.password &&
            props.loginForm.errors.password.length === 0
          }
          onChange={e => setPassword(e.target.value)}
        />
        <Form.Control.Feedback type="invalid">
          {props.loginForm.errors.password}
        </Form.Control.Feedback>
      </Form.Group>
      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button
        variant="primary"
        type="button"
        onClick={() =>
          props.dispatch({ type: "FORM_SUBMIT", payload: { email, password } })
        }
      >
        Submit
      </Button>
    </Form>
  );
};

const mapStateToProps = state => ({
  loginForm: state.loginForm
});

export default connect(mapStateToProps)(LoginForm);
    

要显示字段是否有效，我们必须将布尔值传递给<Form.Control />组件的isValid和isInvalid属性。要显示错误消息，我们将使用类型属性为无效的<Form.Control.Feedback />组件。

      <Form.Control.Feedback type="invalid">
  {props.loginForm.errors.email}
</Form.Control.Feedback>
    

完整源代码

登录表单.js

      import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import { connect } from "react-redux";

const LoginForm = props => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <Form>
      <h2>Login</h2>
      <hr />
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          isInvalid={props.loginForm.errors.email.length > 0}
          isValid={
            props.loginForm.values.email &&
            props.loginForm.errors.email.length === 0
          }
          onChange={e => setEmail(e.target.value)}
        />
        <Form.Control.Feedback type="invalid">
          {props.loginForm.errors.email}
        </Form.Control.Feedback>
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文