react受控组件和非受控组件

深藏阁楼爱情的钟 2023-05-31 15:28 6阅读 0赞

## react受控组件和非受控组件 ##

## 父组件的代码
    
    
    
    import Control from './Control'
    // 引入子组件
    
    export default  class Father  extends Component{
    /* 
        * 当前组件内是：
          * 属性一旦确定就不可更改了
          * 如果是外部传入的属性，我们要通过外部来修改的
      */
      // constructor(props) {
      //   super(props)
      // }
      
        constructor (props){
            super(props)
            this.state={
                // 起到开关的作用
                flag:true
            }
        }
          /* 
          ! 1. 事件处理程序我们是直接定义为实例方法
          ! 2. 事件处理程序我们建议写成箭头函数 - this指向不改变
        */
    
        /* 
          修改状态
            ! 在React中状态的修改只能使用setState()
            ! setState() 的作用是用来更新视图的
            ! setState是异步的
          setState( obj/function, callback ) 参数是有两个的
        */
    
     box=()=>{ 
         this.setState({
         flag:!this.state.flag
         })
     }
    
    render() {
        const {flag}=this.state
        return(
            <div><button onClick={this.box}> 按钮对错</button>
           <Control flag={flag}></Control>
    
    
            </div>
        
               )
    }
    }

import React, { Component } from 'react'
    
     class Control extends Component {
        render() {
            const { flag } = this.props
            return (
                <div>
                    {
                        flag ? '哈哈哈哈 ': '嘻嘻嘻嘻'
                    }
                </div>
            )
        }
    }
    export default  Control