React 学习笔记【三】-白红宇

react表单

【小案例】用受控组件和非受控组件两种方式展示，检测用户表单输入和提交

受控组件

1.构造一个state，创建一条value为空

constructor(props) {    super(props);    this.state ={        value:''    }}复制代码

2.创建form表单元素，内部input输入框，将用户输入的value和state中的value绑定

【注意】此时界面上的input框由于受state初始状态为空的影响，目前不能输入

render(){    return(        
                
                     
      留言内容                
                  
     
            
             
    
    )}复制代码

3.给input表单添加onChange事件检测用户改变input输入框内容

onChange={this.handleChange}复制代码

4.定义handleChange表单检测事件方法，调用setState更新state状态，让state中的value

为用户输入的value，则用户现在输入的内容通过修改state可展示在界面上

handleChange(event){    this.setState({        value:event.target.value    })}复制代码

5.给form标签绑定监测用户提交事件

onSubmit={this.handleSubmit}复制代码

6.定义监测用户提交事件方法，阻止submit的默认提交事件，

此时用户点击提交按钮后，会弹出用户所输入的值

handleSubmit(event){    alert(this.state.value)    event.preventDefault()}复制代码

非受控组件

1.创建form表单标签，input输入框，和submit提交按钮

2.给input标签绑定 ref={(textInput)=>{this.textInput = textInput}} 用来直接获取dom节点的值，此处将textInput的值赋给this.textInput，让外部能访问

3.给form标签绑定监测用户提交事件 onSubmit={this.handleSubmit}

render(){    return(        
                
                     
      留言内容                
      {this.textInput = textInput}}                />            
     
            
             
    
    )}复制代码

4.定义用户提交事件，直接使用监测表单输入的textInput值即可获取到用户value

handleSubmit(event){    alert(this.textInput.value)    event.preventDefault()}复制代码

同时在state中将this转出给标签绑定事件处使用

constructor(props) {    super(props);    //让state中的this能够被handleSubmit外部函数访问    this.handleSubmit = this.handleSubmit.bind(this)}复制代码

状态提升单向数据流

【小案例】留言板

1.在评论区的组件中，我们需要将整个静态评论列表传给父组件

render(){    return(        
                
     评论列表            
     
                      {                  this.props.comments.map((comment,index)=>                    
                              
       {comment}
                    
      
                  )                }            
     
        
    
    )}复制代码

2.在父组件的评论区子标签中接收传来的评论


    
     复制代码

3.在上个监测用户表单输入的提交组件中，创建p标签，显示已有多少条评论

将数据commentsLength props给父组件，数据和逻辑在父组件中定义

已有{this.props.commentsLength}条评论
复制代码

4.在上个监测用户表单输入的提交组件，的按钮提交事件中，定义onAddComment方法，并传给父组件，目的：将用户输入内容作为参数传出

handleSubmit(event){    //alert(this.textInput.value)    this.props.onAddComment(this.textInput.value)    this.textInput.value = ''    event.preventDefault()}复制代码

5.在父组件的子标签中，接收刚子组件传来的评论数，和按钮事件携带函数的用户评论内容参数，

而评论数为数组中的length数


    
     复制代码

6.在父组件里先定义留言板子组件的评论数组，并定义评论区一条内容

然后将提交事件this转出，以备定义事件时使用

constructor(props){  super(props)    this.state = {      comments:['this is my first reply']    }    this.addComment = this.addComment.bind(this)}复制代码

7.定义按钮提交评论事件函数，由旧的评论数加新的评论数组成

addComment(comment111){  this.setState({      //...旧的state.comments数组展开      //最终comments数组是旧+新组成      comments:[...this.state.comments,comment111]  })}复制代码

最终效果

单向数据流：自上而下的数据流，在react中，任何可被改变的数据都只有一个数据源；

和双向绑定的区别：缺点：需要写更多的代码，用回调函数的方式改变数据状态，

优点：很容易找bug

状态提升：数据都交给子组件最近的父组件内管理

react表单

状态提升 单向数据流

状态提升单向数据流