react组件化实战训练——TodoList_优品建站

react组件化实战训练——TodoList

  在这个简单的TodoList项目中,需要实现:
  ● 通过input输入框输入todo内容;
  ● 单击Submit按钮将输入的内容展示在页面上。
  在1.5节脚手架中,Webpack的loader只对JS和JSX做了识别,现在需要在项目中加入CSS的相关loader,目的是让Webpack识别和加载样式文件。
(1)安装CSS的相关loader:

        npm install css-loader style-loader--save-dev
(2)配置Webpack中的loader:

        var webpack = require("webpack");
        var path = require("path");
        const CleanWebpackPlugin = require("clean-webpack-plugin");
        var BUILD_DIR = path.resolve(__dirname, "dist");
        var APP_DIR = path.resolve(__dirname, "src");
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        var config = {
          entry: APP_DIR + "/index.jsx",
          output: {
            path: BUILD_DIR,
            filename: "bundle.js"
          },
          module: {
            rules: [
              {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader"
              }
        },
        {
              test: /\.css$/,                          // 只加载.css文件
              loader: 'style-loader! css-loader'    // 同时运行两个loader
              }
            ]
          },
          devServer: {
            port: 3000,
            contentBase: "./dist"
          },
          plugins: [
            new HtmlWebpackPlugin({
              template: "index.html",
              // favicon: 'theme/img/favicon.ico',
              inject: true,
              sourceMap: true,
              chunksSortMode: "dependency"
            }),
            new CleanWebpackPlugin(["dist"])
          ]
        };
        module.exports = config;
至此,TodoList的项目脚手架配置结束。
  (3)接下来是相应组件的代码,入口页面App.jsx负责渲染组件头部Header和列表ListItems,并在当前组件内部state维护列表的项目和输入的内容。

        export default class App extends Component {
          constructor(props) {
            super(props);
            this.state = {
              todoItem: "",
              items: []
            };
          }
          render() {
            return (
              <div>
</div>
            );
          }
        }
  从上述代码可以看到App组件的state内有todoItem和items。todoItem用于存储输入框输入的值;items用于存储输入框内提交的值,之后用于列表的渲染。
  (4)再来编写输入框输入内容时的onChange事件:

        onChange(event) {
            this.setState({
              todoItem: event.target.value
            });
        }
        <input value={this.state.todoItem} onChange={this.onChange} />
  从上述代码中可以看到,input的值来自于App组件内的state。用户每次输入后,onChange事件监听其变化,然后调用this.setState()将改变的值实时写入input中展示。
(5)表单提交:

        onSubmit(event) {
            event.preventDefault();
            this.setState({
              todoItem: "",
              items: [
              ...this.state.items,
              this.state.todoItem
              ]
            });
        }
        <form className="form-wrap" onSubmit={this.onSubmit}>
            <input value={this.state.todoItem} onChange={this.onChange} />
        <button>Submit</button>
        </form>
  当单击Submit按钮时,输入框的值将通过表单提交的方式触发onSubmit事件,然后调用this.setState()添加输入框中的值到items数组,同时清空输入框。
(6)将内容整理为3部分:头Header、表单form和列表ListItems。其中,Header和ListItems各为一个组件。
./src/Header.js内容如下:

        import React from 'react';
        const Header = props => (
          <h1>{props.title}</h1>
        );
        export default Header;
./src/ListItems.js内容如下:

        import React from 'react';
        const ListItems = props => (
          <ul>
            {
              props.items.map(
              (item, index) => <li key={index}>{item}</li>
              )
            }
          </ul>
        );
        export default ListItems;
Header和ListItems都是无状态函数式组件,接收父级./src/app.jsx传入的props数据,用于各自的展示。
(7)在入口./src/app.jsx中引入组件:

        import React, { Component } from "react";
        import { render } from "react-dom";
        + import ListItems from "./ListItems";
        + import Header from "./Header";
(8)引入样式:

        import React, { Component } from "react";
        import { render } from "react-dom";
        import ListItems from "./ListItems";
        import Header from "./Header";
        + import "./index.css";
至此,所有内容完成,此时这个项目的结构如下:

最终入口app.jsx文件的代码如下:
/src/app.jsx内容如下:

        import React, { Component } from "react";
        import { render } from "react-dom";
        import PropTypes from 'prop-types';          // 定义组件属性类型校验
        import "./index.css";
        import ListItems from "./ListItems";
        import Header from "./Header";
        export default class App extends Component {
          constructor(props) {
            super(props);
            this.state = {
              todoItem: "",
              items: ["吃苹果", "吃香蕉", "喝奶茶"]
            };
            this.onChange = this.onChange.bind(this);
            this.onSubmit = this.onSubmit.bind(this);
          }
          // 输入框onChange事件
          onChange(event) {
            this.setState({
              todoItem: event.target.value
            });
          }
          // 表单提交按钮单击事件
          onSubmit(event) {
            event.preventDefault();
            this.setState({
              todoItem: "",
              items: [
              ...this.state.items,
              this.state.todoItem
              ]
            });
          }
          render() {
            return (
              <div className="container">
              <Header title="TodoList"/>
              <form className="form-wrap" onSubmit={this.onSubmit}>
                <input value={this.state.todoItem} onChange={this.onChange} />
                <button>Submit</button>
              </form>
              <ListItems items={this.state.items} />
              </div>
            );
          }
        }
        App.propTypes = {
          items: PropTypes.array,
          todoItem: PropTypes.string,
          onChange: PropTypes.func,
          onSubmit: PropTypes.func
        };
        render(
          <App />,
          document.getElementById("app")
        );
本例最终的展示效果如图2.4所示。
图2.4 TodoList展示效果
项目源码可在GitHub进行下载,地址是https://github.com/khno/react-comonent-todolist。

  • React组件render()方法的使用举例
    render()方法用于渲染虚拟DOM,返回ReactElement类型。
  • React组件的声明方式
    在React中创建组件的方式有3种: ES 5写法:React.createClass()(老版本用法,不建议使用);ES 6写法:React.Component;无状态的函数式写法,又称为纯组件SFC。
  • 网站制作的基础:版面设计与内容的有效结合
    随着互联网的发展,网站制作的版面设计变得越来越重要。访问者不想再看到只提供内容的网站。虽然内容很重要,但是只有把网站做好了,把网站的内容与版面设计有效结合起来,这种网站和站点才容易被人接受。
  • javascript实践案例:网页计算器
    网页计算器在Web开发中是很常见的功能。下面利用JavaScript中的函数,完成整数加、减、乘、除的运算,实现一个简易版的计算器。
  • 网站设计制作关键环节就是确定网站界面
    界面就是网站给浏览者的第一印象,往往决定着网站的可看性,在确定网站的界面时要注意以下三点:1.栏目与板块编排,2.目录结构与链接结构,3.进行形象设计。
  • 集成基于Promise的工具及Promise的用法
    我们要解释一下最后一条规则“如果一个工具会返回Promise,那么你就不需要这个工具的插件”,以免你还没听说过Promise。总体而言,Promise是一种用同步的方法来处理异步结果的方法。听起来很难懂?好吧,也许是有点。先剧透一下:Promise可以非常好地集成到Gulp task系统中
  • 网站建设如何选择和优化网站域名
    网站建设的第一步就是要注册域名,域名就相当于是实体店的地址,选址非常的重要。那么如何去选择域名更有利于网站优化和推广呢?本文就向大家详细介绍选择域名需要注意那些事项。
  • 网站制作具体流程及六大步骤是什么?
    网站制作是一个综合性极强的工作,涉及到商业策划、平面设计、人机界面、程序语言和数据库等,本文介绍网站制作六大步骤。
  • uniapp实现多端开发, PHP写api接口的一些注意事项与安全策略
    市面上很多关于多端开发的框架,比较常用,流行的框架 uni-app,Chameleon(变色龙),taro这些,都可以支持多端,一套代码,8个平台支持。
  • 房地产类网站制作报价内容明细
    本文主要介绍房地产类网站制作报价的内容和模板,包括移动端和pc端页面的设计和功能的开发。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC