react介绍、下载安装、jsx模板语法介绍、组件、脚手架、事件处理、事件对象、组件状态数据的定义与更新

最新推荐文章于 2024-07-02 08:47:02 发布

琴～～

最新推荐文章于 2024-07-02 08:47:02 发布

阅读量515

点赞数

文章标签： react

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/115259914

版权

一.介绍

react是facebook公司中由前端开发团队进行开发和维护

定义.

用于构建用户界面的JavaScript库

特点:

react是基于组件进行开发
数据驱动和视图渲染相结合来构建单页面应用
react中没有基本指令,计算属性,过滤器,监听器等等
react中没有数据双向绑定
React是react.js的核心
Reactdom是react-dom.js的核心

二.下载安装

方式一:

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

方式二

npm i react --save

三.核心对象及方法介绍

React
- React是react.js的核心

React.createElement(标签名称,属性集合,内容)   #创建标签对象

ReactDOM
- ReactDOM是react-dom.js的核心

ReactDOM.render(标签对象,真实的dom节点)		#将标签对象渲染到页面中

四.案例

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- development 开发模式下 -->
    <!-- 
        引入js文件
        1.引入react.js
        2.引入react-dom.js文件
     -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

</head>
<body>
    <!-- 2.声明一个容器 -->
    <div id="app"></div>

    <script>
        // 1.创建一个元素对象
        /**
         * React是react.js的核心
        */
        // React.createElement(标签名称,属性集合,内容)

        const h1 = React.createElement('h1',{title:'第一次学习react',style:{background:'aqua',color:'yellow',border:'1px solid red'}},'React')
        // console.log(h1);


        // 将元素对象渲染到页面中
        /**
         * ReactDOM是react-don=m.js的核心
        */
    //    ReactDOM.render(标签对象,真实的dom节点)
        ReactDOM.render(h1,document.querySelector('#app'))
    </script>

</body>
</html>

react嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- development 开发模式下 -->
    <!-- 
        引入js文件
        1.引入react.js
        2.引入react-dom.js文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <!-- 2.声明一个容器 -->
    <div id="app"></div>
    <script>
        const h1 = React.createElement('h1',{title:'标题一'},'首页');
        const img = React.createElement('img',{src:'./img/women.jpg'},null)
        const div = React.createElement('div',{className:'container'},h1,img)
        // console.log(div);

        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>

五.jsx模板语法介绍

jsx(javascript xml)是在javascript的基础上结合了xml语法
jsx不被浏览器解析
jsx需要通过babel进行解析
jsx专门用于构建react项目的

1.xml语法结构

xml严格区分大小写
xml的双标签必须要有开始和结束
xml的单标签必须要有结束

2.jsx语法结构

* 1.jsx需严格执行xml语法规范
* 2.jsx模板双标签必须要有开始和结束
* 3.jsx模板单标签必须要有结束
* 4.jsx模板必须严格区分大小写
* 5.jsx模板只能有一个根节点

3.jsx模板语法

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 有一个容器 -->
    <div id="app"></div>

    <!-- 
        type="text/babel"  浏览器看到是text/babel类型,不做解析,交给babel进行解析
     -->
    <script type="text/babel">
        // 写jsx语法
        /**
         * 1.jsx需严格执行xml语法规范
         * 2.jsx模板双标签必须要有开始和结束
         * 3.jsx模板单标签必须要有结束
         * 4.jsx模板必须严格区分大小写
         * 5.jsx模板只能有一个根节点
        */
        const div = <div className="container">
                        <h1>标题一</h1>
                        <img src="./img/women.jpg" alt="美女" />
                    </div>
        // console.log(div);
        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>

模板变量的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 有一个容器 -->
    <div id="app"></div>

    <!-- 
        type="text/babel"  浏览器看到是text/babel类型,不做解析,交给babel进行解析
     -->
    <script type="text/babel">
        let msg = '标签一';
        let imgUrl = './img/women.jpg'
        const div = <div className="container">
                        <h1>{msg}</h1>
                        <img src={imgUrl} alt="美女" />
                    </div>
        // console.log(div);
        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>

模板方法的使用
- 调用系统方法
- 调用自定义方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const msg = 'i have an apple';
        function fn(str){
            return str.split('').reverse().join('');
        }
        const div  = <div className="container">
                       {/* 调用系统方法*/}
                       <div>{msg.toUpperCase()}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

                       
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const msg = 'i have an apple';
        function fn(str){
            return str.split('').reverse().join('');
        }
        const div  = <div className="container">
                       {/*调用自定义方法*/}
                       {/*自定义方法中要有返回值*/}
                       <div>{fn(msg)}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

模板注释
- ```
{/* 这是注释内容*/}
```
条件渲染
- 不能使用if结构做条件判断
- 必须使用三元运算符做条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
       let age = 10;
        const div  = <div className="container">
                        {/*在jsx模板中不能使用if结构*/}
                        {/*错误写法*/}
                        {/*<p>{if(age>=18){'已成年'}else{'未成年'}}</p>*/}

                        {/*写条件判断需要使用三元运算符*/}
                        <div>{age >= 18 ? '已成年' : '未成年'}</div>

                        {/*在jsx模板变量中可以嵌套jsx模板*/}
                        <div>{age >= 18 ? <h2>已成年</h2> : <h3>未成年</h3>}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

关键字
- className在jsx模板语法中将标签属性class名称改为className
- htmlFor在jsx模板语法中将标签属性for名称改为htmlFor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
      
        const div  = <div className="container">
                        <label htmlFor="search">搜索</label>
                        <input type="text" id="search" placeholder="请输入关键字" />
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

通过style指定行内样式
- 需要使用{{}}来指定行内样式
- 外层{}表示:jsx模板解析变量
- 内层{}表示:一个json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const style = {background:'pink',color:'green'}
        const div  = <div className="container">
                        {/*错误写法*/}
                        {/*<h1 style="background:'pink';color:'green';">一级标标题</h1>*/}

                        {/*
                            1.外层{}:表示jsx解析变量
                            2.内层{}:表示是一个json
                            
                        */}
                        <h1 style={style}>一级标标题</h1>
                        
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

列表的渲染
- forEach
- map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: black;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const arr = ['vue','react','angular'];
        const arr1 = [<h3 key="0">vue</h3>,<h3 key="1">react</h3>,<h3 key="2">angular</h3>];

        // forEach
        // 没有返回值
        let arr2 = [];
        arr.forEach(item=>{
            arr2.push(item)
        })

        //map
        let arr3 = arr.map((item,index)=>{
           return <h3 key={index}>{item}</h3>
        })


        let brand = [
            {
                id:1,
                name:'宝马 X6',
                price:500000
            },
            {
                id:2,
                name:'奥迪 A8',
                price:800000
            },
            {
                id:3,
                name:'奔驰',
                price:1000000
            }
        ]


        const div  = <div className="container">
                        {/*数组直接以字符串的形式显示*/}
                        {arr}
                        <hr />
                        {arr1}
                        <hr />
                        {arr2}
                        <hr />
                        {arr3}
                        <hr />
                        {arr.map((item,index)=><h3 key={index}>{item}</h3>)}
                        <hr />
                        {brand.map(item=>(
                            <p key={item.id}>{item.name}====={item.price}</p>
                        ))}
                    </div>
                        

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

总结上午知识点:
1.React 
	React是react.js的核心
	React.createElement(标签名,属性集合,内容)
2.ReactDOM
	ReactDOM是raect-dom.js的核心
	ReactDOM.render(标签对象,真实的dom节点)
3.jsx模板语法
	引入babel.js
	{},解析js变量
	{str.toUperCase()} //系统方法
	{fn()} //自发定义方法必须要有返回值
	条件渲染:只能使用三元运算,if结构不可以
	列表渲染:forEach  map(推荐)
	关键字:  className htmlFor
	注释:  {/*这里写注释内容*/}
	style行内样式: style={{写样式内容}}

富文本
- dangerouslySetInnerHTML={{__html:变量名}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: black;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const con = `<div>
                        <h1>一级标题</h1>
                        <img src="./img/shafa.jpg" alt="沙发" />
                    </div>`;
        console.log(con);
        const div  = <div className="container">
                       <div dangerouslySetInnerHTML={{__html:con}}></div>
                    </div>
                        

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

六.组件

函数定义组件

* 函数组件:
* 1.函数组件名首字母必须大写
* 2.函数组件中必须要有返回值 即return
* 3.返回值中有且只能有一个根节点

父组件向子组件传值

父组件: 以自定义属性的形式将数据传递给子组件
子组件: 以参数的形式进行接收父组件传递的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
            /**
             * 函数组件:
             * 1.函数组件名首字母必须大写
             * 2.函数组件中必须要有返回值 即return
             * 3.返回值中有且只能有一个根节点
            */
            function Header(){
                return <div className="well">
                            <h2>二级标题</h2>
                            <p>新闻首页</p>
                        </div>
            }
            function Footer(){
                return <div className="well">
                        <p>底部导航</p>
                    </div>
            }

        const div = <div className="alert alert-info">
                        <h1>父组件</h1>
                        <Header></Header>
                        <hr />
                        <Footer />
                    </div>
        //  console.log(div);    
        
        ReactDOM.render(div,document.querySelector('#app'));
        
    </script>
</body>
</html>

类定义组件

 * 类组件
 * 1.类组件名称首字母必须大写
 * 2.类组件都继承自React.Component 基类
 * 3.类组件有一个系统自动注入的方法 render方法  (目的:渲染jsx模板)
 * 4.render方法中必须要有return
 * 5.render方法中返回结果只能有一个根节点

父组件向子组件传值

父组件: 以自定义属性的形式向子组件传值
子组件: 以this.props接收父组件传递的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        // 声明一个类组件
        /**
         * 类组件
         * 1.类组件名称首字母必须大写
         * 2.类组件都继承自React.Component 基类
         * 3.类组件有一个系统自动注入的方法 render方法  (目的:渲染jsx模板)
         * 4.render方法中必须要有return
         * 5.render方法中返回结果只能有一个根节点
        */
        class PageTitle extends React.Component{
            render(){
                console.log(this.props);
                return <div className="well">
                            <h2>{this.props.msg}</h2>
                        </div>
            }
        }

        let msg = '子组件';
        const div = <div className="alert alert-info">
                        <h2>父组件</h2>
                        <PageTitle msg={msg}></PageTitle>
                    </div>   
        
        ReactDOM.render(div,document.querySelector('#app'));
        
    </script>
</body>
</html>

七.脚手架

npm i create-react-app -g  全局安装脚手架
create-react-app -V  查看安装版本

1.创建项目

create-react-app 项目名称
cd 项目名称    #进入项目目录
npm start    #开启项目
	如果报错,需要执行以下命令:
    	git add .   #添加在暂存区
        git commit -m '说明'  #添加到本地仓库
        npm run eject   #将项目内容全部导出
        npm start    #启动项目
项目启动成功: http://localhost:3000

2.项目目录介绍

-config   #项目配置文件
--public	#存放静态资源文件及唯一一个页面index.html
--src	#你的代码
	pages
    store
    utils
	App.jsx   项目根组件
    index.js	项目的唯一入口文件

3.项目目录清空

src
	App.jsx 
		import React from 'react'

        export default function App() {
          return (
            <div>
              React
            </div>
          )
        }

	index.js
		import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App.jsx';

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );

插件: ES7 react/dedux

Case.jsx

import React, { Component } from 'react'

export default class Case extends Component {
    render() {
        return (
            <div>
                <h1>一级标题</h1>
            </div>
        )
    }
}

八.事件处理

1.事件注册

事件名称: on+首字母大写的事件名={自定义的事件函数名}
自定义事件函数名调用时,后面不能加(), 如果写了就会自动被触发

import React, { Component } from 'react'

export default class EventOn extends Component {
    hander(){
        console.log('我被触发了');
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
                {/* 
                    事件注册:
                    1.事件名称:  on+首字母大写的事件名={自定义的事件函数名}
                */}
                <button className="btn btn-success" onClick={this.hander}>点击</button>
            </div>
        )
    }
}

2.事件传参

 事件传参:
 1.将调用的自定义事件函数放入一个方法体中.
 2.同时需要通过bind函数改变this指向

import React, { Component } from 'react'

export default class EventOn extends Component {
    hander1(name){
        console.log(name);
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
               
                {/* 若需要传参,则需要在自定义事件名后面增加(), */}
                {/* 
                    事件传参:
                    1.将调用的自定义事件函数放入一个方法体中.
                    2.同时需要通过bind函数改变this指向
                */}
                <button className="btn btn-info" onClick={function(){this.hander1('刘劲')}.bind(this)}>传参按钮</button>

            </div>
        )
    }
}

3.通过箭头函数实现事件传参

<button className="btn btn-primary" onClick={()=>this.hander1('陶甜也')}>传参按钮1</button>

九.事件对象(event)

import React, { Component } from 'react'

export default class EventOn extends Component {
    hander2(e,name){
        console.log(e);
        console.log(name);
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
                {/* 获取事件对象 */}
                {/* 
                    获取事件对象
                    1.通过箭头函数传递e,对接到自定义事件函数接收e,
                */}
                <button className="btn btn-success" onClick={(e)=>this.hander2('唐达',e)}>事件对象按钮</button>
            </div>
        )
    }
}

十.组件状态数据的定义和更新

import React, { Component } from 'react'

export default class Login extends Component {
    name = '刘劲'
    constructor(){
        super()
        // state中存放就是状态数据
        this.state = {
            userName:'唐达',
        }
    }
    change(name){
        // 采用以下方式只是将state状态的数据发生改变.但是并未渲染到页面中.
        // this.state.userName = name;
        // console.log(this.state);


        /**
         * setState是一个异步函数,只修改state状态中的数据
         * 如果需要得到修改后的数据,则需要在第二个参数中来获取.
         * 
         */
        this.setState({userName:name},()=>{
            console.log(this.state);
        })
        // console.log(this.state);
    }
    render() {
        // console.log(this.state);
        const {userName} = this.state;
        return (
            <div>
                <div>{this.name}</div>
                <h3>{this.state.userName}</h3>
                {/* 简化形式 */}
                <h2>{userName}</h2>
                <button className="btn btn-success" onClick={()=>this.change('卢升')}>修改</button>
            </div>
        )
    }
}

十一.品牌管理案例

import React, { Component } from 'react'

export default class Brand extends Component {
    constructor(){
        super()
        this.state = {
            brandList : [
                {
                    id:2,
                    name:'宝马',
                    time:new Date()
                },
                {
                    id:1,
                    name:'奥迪',
                    time:new Date()
                },
            ],
            current:{},//修改
        }
    }
    // 品牌提交
    submit(e){
        if(e.keyCode === 13){
            let name = e.target.value;
            if(name === ''){
                alert('请输入品牌名称');
                return
            }
            if(this.state.current.id){
                 // 修改品牌
                 this.update(this.state.current,name)
            }else{
                this.add(name)
            }
            // 将输入框中value值清空
            e.target.value = '';
        }
    }
    // 添加品牌
    add(name){
        const {brandList} = this.state;
        let id = brandList.length > 0 ? brandList[0].id+1 : 1;
        let time = new Date();
        let params = {
            id,
            name,
            time
        }
        brandList.unshift(params);
        // console.log(brandList);
        this.setState({brandList})
    }
    // 获取要修改的品牌
    edit(row){
        // 将品牌名称显示在输入框
        document.querySelector('input').value = row.name;
        // 将内容存入搭配current中
        this.setState({current:row})
    }
    // 修改品牌
    update(row,name){
        const {brandList} = this.state;
        const newList = brandList.map(item=>{
            if(item.id ===  row.id){
                return {
                    ...item,
                    name:name
                }
            }else{
                return item
            }
        })
        // console.log(newList);
        this.setState({brandList:newList});
        // 将current值清空
        this.setState({current:{}});
    }
    // 删除
    del(index){
        this.state.brandList.splice(index,1);
        // console.log(this.state.brandList);
        this.setState({brandList:this.state.brandList})
    }
    render() {
        const {brandList} = this.state
        return (
            <div className="container">
                <h1>品牌管理案例</h1>
                <div className="well">
                    <input className="form-control" type="text" placeholder="请输入品牌名称" onKeyUp={(e)=>this.submit(e)}/>
                </div>
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>品牌名称</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {brandList.length > 0 ? brandList.map((item,index)=>(
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>{item.time.toLocaleString()}</td>
                                <td>
                                    <button className="btn btn-primary" onClick={()=>this.edit(item)}>编辑</button>
                                    <button className="btn btn-danger" onClick={()=>this.del(index)}>删除</button>
                                </td>
                            </tr>
                        )) : <tr>
                                <td colSpan="4">暂无数据</td>
                            </tr>}
                        
                    </tbody>
                </table>
                
            </div>
        )
    }
}