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

红太狼 2022-01-31 01:07 141阅读 0赞

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

## 1.首先完成组件的拼接 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70][]

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

<!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>

运行结果：就是干掉了呀

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1][]

## 3.就是增加数据了呀 ##

<!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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2][]

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

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

<!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，来控制输入框！

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220131/6f220040860a4ba4b26601b1553596d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220131/347f8a0f54de4403b8d97ee2cf39341d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220131/b45cee27013b40aba46728123b8be22e.png