React核心技术-精讲---第二天的讲解(01-React基础篇-把第一天的所学到知识串联起来做一个案例)

最新推荐文章于 2024-06-22 18:54:12 发布
最新推荐文章于 2024-06-22 18:54:12 发布
阅读量321 收藏 1
点赞数
分类专栏： WEB前端知识 web Ës6 JavaScript的 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itwangyang520/article/details/90231748
版权

把第一天的所学到知识串联起来做一个案例

 

1.首先完成组件的拼接

<!--
    Created by wangyang on 2019-05-13.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React 练习</title>
  <style>
    #app{margin: 50px auto;width: 600px;}
    fieldset{border: 1px solid purple;margin-bottom: 20px;}
    fieldset input{width: 200px;height: 30px;margin: 10px 0;}
    table{width: 600px;border: 2px solid purple;text-align: center;}
    thead{background-color: purple;color: #fff;}
  </style>
</head>
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">


//1.父组件
  class App extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        studentArr: [
          {name: 'wang1', age: 10, gender: '男', phone: '18899989839'},
          {name: 'wang2', age: 20, gender: '男', phone: '18299839890'},
          {name: 'wang3', age: 30, gender: '男', phone: '18998938783'}
        ]
      }
    }
    render(){
      return(
        <div>
          <Add/>
          <List studentArr={this.state.studentArr}/>
        </div>
      )
    }
  }

  //2.子组件，添加的版块
class Add extends React.Component{
  render(){
    return(
      <div>
        <fieldset>
          <legend>itwang信息录入系统(React版)</legend>
          <div>
            <span>姓名: </span>
            <input type="text" placeholder="请输入姓名"/>
          </div>
          <div>
            <span>年龄: </span>
            <input type="text" placeholder="请输入年龄"/>
          </div>
          <div>
            <span>性别: </span>
            <select>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div>
            <span>手机: </span>
            <input type="text" placeholder="请输入手机号码"/>
          </div>
          <button>创建新用户</button>
        </fieldset>
      </div>

    )
  }
}
  //3.子组件，展示版块

class List extends React.Component{
    //设置props中属性的类型
  static propTypes = {
    studentArr: PropTypes.array.isReferenced,
  };
  render(){
    //console.log(this.props.studentArr);
    const {studentArr} = this.props;
    return(
      <div>
        <table>
          <thead>
          <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
          </tr>
          </thead>
          <tbody>
            {
              studentArr.map((stu,index)=> (
                <tr key={index}>
                  <td>{stu.name}</td>
                  <td>{stu.gender}</td>
                  <td>{stu.age}</td>
                  <td>{stu.phone}</td>
                  <td><button>删除</button></td>
                </tr>
              ))
            }

          </tbody>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
)
</script>
</body>
</html>

运行一下，长的这一个样子

 2.先做删除，删除比较容易，判断索引值就可以干掉

<!--
    Created by wangyang on 2019-05-13.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React 练习</title>
  <style>
    #app{margin: 50px auto;width: 600px;}
    fieldset{border: 1px solid purple;margin-bottom: 20px;}
    fieldset input{width: 200px;height: 30px;margin: 10px 0;}
    table{width: 600px;border: 2px solid purple;text-align: center;}
    thead{background-color: purple;color: #fff;}
  </style>
</head>
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">

//1.父组件
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      studentArr: [
        {name: 'wang1', age: 10, gender: '男', phone: '18899989839'},
        {name: 'wang2', age: 20, gender: '男', phone: '18299839890'},
        {name: 'wang3', age: 30, gender: '男', phone: '18998938783'}
      ]
    };
    this.delFormWithIndex = this.delFormWithIndex.bind(this);
  }

  /**
   * 根据索引删除一条学生记录
   * @param index
   */
  delFormWithIndex(index){
    //1.删除
    const {studentArr} = this.state;
    studentArr.splice(index,1);
    //2.更新状态
    this.setState({
      studentArr
    })
  }

  render(){
    return(
      <div>
        <Add/>
        <List studentArr={this.state.studentArr} delFromArr={this.delFormWithIndex}/>
      </div>
    )
  }
}

//2.子组件，添加的版块
class Add extends React.Component{
  render(){
    return(
      <div>
        <fieldset>
          <legend>itwang信息录入系统(React版)</legend>
          <div>
            <span>姓名: </span>
            <input type="text" placeholder="请输入姓名"/>
          </div>
          <div>
            <span>年龄: </span>
            <input type="text" placeholder="请输入年龄"/>
          </div>
          <div>
            <span>性别: </span>
            <select>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div>
            <span>手机: </span>
            <input type="text" placeholder="请输入手机号码"/>
          </div>
          <button>创建新用户</button>
        </fieldset>
      </div>

    )
  }
}
//3.子组件，展示版块

class List extends React.Component{
  //设置props中属性的类型
  static propTypes = {
    studentArr: PropTypes.array.isReferenced,
    delFromArr:PropTypes.func.isReferenced
  };
  render(){
    //console.log(this.props.studentArr);
    const {studentArr,delFromArr} = this.props;
    return(
      <div>
        <table>
          <thead>
          <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
          </tr>
          </thead>
          <tbody>
          {
            studentArr.map((stu,index)=> (
              <tr key={index}>
                <td>{stu.name}</td>
                <td>{stu.gender}</td>
                <td>{stu.age}</td>
                <td>{stu.phone}</td>
                <td><button onClick={()=>delFromArr(index)}>删除</button></td>
              </tr>
            ))
          }

          </tbody>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
)
</script>
</body>
</html>

运行结果：就是干掉了呀

3.就是增加数据了呀

<!--
    Created by wangyang on 2019-05-13.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React 练习</title>
  <style>
    #app{margin: 50px auto;width: 600px;}
    fieldset{border: 1px solid purple;margin-bottom: 20px;}
    fieldset input{width: 200px;height: 30px;margin: 10px 0;}
    table{width: 600px;border: 2px solid purple;text-align: center;}
    thead{background-color: purple;color: #fff;}
  </style>
</head>
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">

//1.父组件
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      studentArr: [
        {name: 'wang1', age: 10, gender: '男', phone: '18899989839'},
        {name: 'wang2', age: 20, gender: '男', phone: '18299839890'},
        {name: 'wang3', age: 30, gender: '男', phone: '18998938783'}
      ]
    };
    this.delFormWithIndex = this.delFormWithIndex.bind(this);
    this.addToArr = this.addToArr.bind(this);
  }

  /**
   * 根据索引删除一条学生记录
   * @param index
   */
  delFormWithIndex(index){
    //1.删除
    const {studentArr} = this.state;
    studentArr.splice(index,1);
    //2.更新状态
    this.setState({
      studentArr
    })
  }


  /**
   * 插入一条记录
   * @param student
   */
  addToArr(student){
    //1.插入
    const {studentArr} = this.state;
    studentArr.unshift(student);
    //2.更新数据
    this.setState({
      student
    })
  }

  render(){
    return(
      <div>
        <Add addToArr = {this.addToArr}/>
        <List studentArr={this.state.studentArr} delFromArr={this.delFormWithIndex}/>
      </div>
    )
  }
}

//2.子组件，添加的版块
class Add extends React.Component{
  constructor(props){
    super(props);
    //绑定ref
    this.stuName = React.createRef();
    this.stuAge = React.createRef();
    this.stuGender = React.createRef();
    this.stuPhone = React.createRef();
  }
  //设置props中属性的类型
  static propTypes = {
    addToArr: PropTypes.func.isReferenced
  };

  render(){
    return(
      <div>
        <fieldset>
          <legend>itwang信息录入系统(React版)</legend>
          <div>
            <span>姓名: </span>
            <input type="text" ref={this.stuName} placeholder="请输入姓名"/>
          </div>
          <div>
            <span>年龄: </span>
            <input type="text" ref={this.stuAge} placeholder="请输入年龄"/>
          </div>
          <div>
            <span>性别: </span>
            <select ref={this.stuGender}>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div>
            <span>手机: </span>
            <input ref={this.stuPhone} type="text" placeholder="请输入手机号码"/>
          </div>
          <button onClick = {()=>this.dealWithClick()}>创建新用户</button>
        </fieldset>
      </div>

    )
  }

//  点击增加按钮
  dealWithClick(){
    //1.读取用户，输入的数据
    const  name = this.stuName.current.value;
    const  age = this.stuAge.current.value;
    const  gender = this.stuGender.current.value;
    const  phone = this.stuPhone.current.value;
    console.log(name);


    //2.数据校验
    if(!name || !age || !gender || !phone){
      alert("请您输入数据");
      return
    }

    //3.添加数据
    this.props.addToArr({name,age,gender,phone});

    //4.清除输入框的内容
    this.stuName.current.value = this.stuPhone.current.value = this.stuAge.current.value = this.stuAge.current.value =  '';
  }
}
//3.子组件，展示版块

class List extends React.Component{
  //设置props中属性的类型
  static propTypes = {
    studentArr: PropTypes.array.isReferenced,
    delFromArr:PropTypes.func.isReferenced
  };
  render(){
    //console.log(this.props.studentArr);
    const {studentArr,delFromArr} = this.props;
    return(
      <div>
        <table>
          <thead>
          <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
          </tr>
          </thead>
          <tbody>
          {
            studentArr.map((stu,index)=> (
              <tr key={index}>
                <td>{stu.name}</td>
                <td>{stu.gender}</td>
                <td>{stu.age}</td>
                <td>{stu.phone}</td>
                <td><button onClick={()=>delFromArr(index)}>删除</button></td>
              </tr>
            ))
          }

          </tbody>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
)
</script>
</body>
</html>

运行结果：就是完美的增加了，唯一不足的就是，没有好好的写代码判断正则，就简单判断是否为空，嘻嘻，小宝贝们，自己动手吧

 思考一下，我们能不能，不用这个ref，来实现对输入框的控制呀，有什么方法呢？？？

接下来我就演示一下这个神奇的操作！！

<!--
    Created by wangyang on 2019-05-15.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
  //1.创建登录组件类
  class Login extends React.Component{
    constructor(props){
      super(props);
      //初始化状态
      this.state = {
        userName:'',
        userPwd:''
      }
    }

    render(){
      const {userName,userPwd} = this.state;
      return(
        <form action="" onSubmit={()=>this.login()}>
          <div>
            <span>用户名：</span>
            <input type="text" value={userName} onChange={(e)=>this.userOnChange(e)}/>
          </div>
          <div>
            <span>密码：</span>
            <input type="password" value={userPwd} onChange={(e)=>this.userOnChangePwd(e)} />
          </div>

          <input type="submit" value="登录"/>
        </form>
      )

    }



    userOnChange(e){
      // console.log(e.target.value);
      //1.读取输入的用户名
      const userName = e.target.value;
      //2.更新状态
      this.setState({
        userName
      });
    }

    userOnChangePwd(e){
      // console.log(e);
      //1.读取输入的用密码
      const userPwd = e.target.value;
      //2.更新状态
      this.setState({
        userPwd
      });
    }


    login(){
      //判断输入框是否为空
      if (!userPwd || !userName == ''){
        alert('不能为空');
        return;
      }
      //1.取出数据
      const {userName,userPwd} = this.state;
      const showInfo = `用户名：${userName},密码：${userPwd}`;
      alert(showInfo)
    }



  }

  ReactDOM.render(
    <Login/>,
    document.getElementById('app')
  )
</script>
</body>
</html>

这个代码就是简单的演示了一下，不用ref，来控制输入框！

好啦，同志们，开始撸代码吧！

itwangyang520
关注
专栏目录
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于... node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
精析React与Vue架构异同及React核心技术——涵盖JSX、组件、Props、State、生命周期与16.8版后Hooks深化解析
JINGWHALE
05-05 1156
本文详细介绍了 React 与 Vue 架构区别，以及ReactJSX、组件、Props、State、生命周期函数以及自React 16.8版本引入的Hooks等主要核心语法。React，Facebook开源的JavaScript库，用于构建高性能用户界面。通过组件化开发，它使UI的构建、维护变得简单高效。利用虚拟DOM实现快速渲染更新，适用于单页应用、移动应用（React Native）。React极大推动了现代前端技术的发展与实践。
React框架的来龙去脉，react的技术原理及技术难点和要点，小白的进阶之路
最新发布
zhang9880000的博客
06-22 2355
React 生态系统包含了丰富的工具和库，帮助开发者### 总结（续）React 生态系统包含了丰富的工具和库，帮助开发者高效地构建现代 Web 应用。从状态管理、表单处理、国际化，到动画、测试、构建工具，React 社区提供了多种解决方案，满足不同场景下的需求。提升开发效率：使用高效的状态管理和表单处理库，如 Redux 和 Formik。增强用户体验：通过动画库如 Framer Motion 和 Recharts 展示丰富的交互和数据可视化。提高代码质量。
React核心技术浅析
grooyo的博客
09-26 349
这段代码的意思是通过方法将h1包裹的JSX元素渲染到id为“root”的HTML元素上. 除了在JS中早已熟知的h1。
React 核心技术浅析
逆袭的菜鸟X
02-21 201
react是一个将数据渲染为HTML视图的开源 JavaScript库。
React核心技术-精讲---第一天的讲解(01-React基础篇-快速入门)
itwangyang520的博客
05-12 530
我建议使用官方教程，配合使用，最好最好阅读原版的官方教程，中文滞后了！！！！ 官网教程：https://reactjs.org/ 华丽的分割线-------------------------------------------------------------------------------------------------------------------------------...
react-cornerstone-viewport:React的基础医学图像视口组件
05-06
react-cornerstone-viewport React的基础医学图像视口组件 文档和示例： : 安装# # NPMnpm install --save react-cornerstone-viewport# # Yarnyarn add react-cornerstone-viewport用法import React , { Component ...
react-native-get-random-values:React Native的getRandomValues的一个小实现
04-30
React Native的crypto.getRandomValues React Native的crypto.getRandomValues一个小实现。 这对于为依赖它的库进行polyfill很有用。安装npm install --save react-native-get-random-valuesnpx pod-install :light_...
react-schema-render:react-schema-render是一个通用型schema转React组件的工具组件
04-05
React模式渲染介绍react-schema-render是一个通用型的模式转阵营组件的工具组件。其遵守规范。特征体积小：仅3kb；功能强：支持细分解析，深度叠加，混合渲染等；扩展性高：支持自定义解析器，装饰器；侵入性低：...
react-json-schema:使用映射到React组件的JSON模式配置和构建视图
05-17
react-json-schema npm install react-json-schema 通过将JSON定义映射到React组件来从JSON构造React元素。 将react-json-schema用于数据驱动的布局，或用作React组件和道具的抽象层。 渲染到任何地方（只要是DOM）...
React开发实战完整版，直接下载
06-22
React开发实战完整版，直接下载React开发实战完整版，直接下载
react最全项目实战
01-08
该项目采用react最新技术，结合react-redux,redux-thunk等核心技术，使用axios来获取数据请求。immutable.js、redux-immutable等核心技术。
React经典面试题
幽幽小春
12-20 3万+
React经典面试题 1、react生命周期及相关用法 react生命周期分为初始化阶段、运行阶段、销毁阶段。 (1) 初始化阶段： componentWillMount：实例挂载之前 Render：渲染组件 componentDidMount：实例挂载完成。一般在这个函数中与后台进行初始化数据交互。 (2)运行阶段： componentWillReceiveProps：父组件改变时调用。 ...
React的超详细讲解
xuwei1215225的博客
05-13 6888
React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 其它相似打包工具还有rollup.js 、 parcel、...
React核心技术-精讲---第三天的讲解(03-React进阶篇-框架原理)
itwangyang520的博客
05-15 450
组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程; 如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中, 就能够很好的把控项目的性能细节。 1.生命周期 <!-- Created by wangyang on 2019-05-13. itwangyang@gmail.com http://www.itwangyan...
剖析React核心原理——超前的革命性前端框架
小秋博客
08-10 511
前端每18月难一倍——因为我们面临前所未有的工程化挑战，复杂度与几年前完全不是一个等级，而社区要找到能保持开发效率和开发体验的工具和设计模式。React从其他领域偷师学艺，结合前端面临的独特问题，提出了一系列解决方案。可以说React的出现，吸引了众多IT企业的尝试，其中包括Strikingly。Strikingly.com CTO 郭达峰和Strikingly.com前端工程师冯哲锐，联合发表文...
React几种基本配置方案
u012742622的博客
11-02 2219
跳转到主要内容 w3cplusCSS3 Mobile Sass JavaScript 视频教程 译文 SVG 工具 标签云 React几种基本配置方案 作者：大漠 日期：2016-05-27 点击：1677 React
web前端：Canvas 基础（一）
热门推荐
itwangyang520的博客
11-01 3万+
web前端：Canvas 基础（一）
React Native 0.57.0-rc.1框架简介与核心文件解析
资源摘要信息:React Native 0.57.0-rc.1是一个早期版本的React Native框架，用于构建跨平台的原生应用程序。这个框架允许开发者使用JavaScript和React来编写本地UI组件，并能够同时在iOS和Android平台上运行，极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值