04/09-暴露DOM元素.html

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">

    class App extends React.Component{
      constructor(props){
        super(props)
        this.state={
          
        }
      }
      componentWillMount() {
        console.log('componentWillMount')
      }
      
      render(){
        return(
          <div>
            {/*ref用于暴露组件内的DOM元素对象
            
              ref属性为回调函数，自动将所在的DOM元素对象传给函数的第一个参数 
              该回调哈数会在挂载和卸载时自动被回调
              相当于onClick={e=>this.handleClick(e,'text')}
              this.myP=el  是把el这个Dom元素赋给了myP这个变量 
              如果要把el做处理，用函数来处理可以写成<p ref={e=>this.handleRef(e)}></p> ref就和onClick一样  只是onClick是点击促发，ref是render的时候触发
              改回调函数会被调用两次，当组件被挂载时会立即回调（在render函数后回调），这时回调，react会将所在DOM元素作为参数传给回调
              当组件被卸载时会立即回调，这时回调，将null传给回调函数的参数
              一般不滥用这个ref，实在不行才用。尽量用数据来改
              父子之间用props，子用state来改
              Vue里面也有个ref，但暴露的是子组件对象，不是DOM
              借助于ref  甚至可以把子组件里的元素暴露给父元素
            */}
            {/*<p ref={(el)=>{this.myP=el}}>aaaa</p>*/}
            <p ref={(el)=>{console.log(el);this.myP=el}}>aaaa</p>
            <button onClick={this.myClick}>修改p元素样式</button>
          </div>
        )
      }

      componentDidMount(){
        console.log('componentDidMount')
        //要访问myP肯定要在这个函数里访问  在WillMount里访问不到
      }
      myClick=()=>{
        //修改P样式，不推荐用document.getElement....
        console.log(this.myP)
        this.myP.style.background="red"
      }
    }
    
    
    
    ReactDOM.render(<App/>,document.getElementById('root'))
    
    </script>
  

10-将子组件元素暴露给父元素

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
    class App extends React.Component{
       getInput=()=>{
         //子组件的input元素，focus()
         
          this.childInput.focus()
        }

     myFn=(el)=>{
       debugger
      this.childInput=el
     }
      render(){

       
        return(
          <div>
            <Child myFn={this.myFn}/>
            <button onClick={this.getInput}>触发子组件的input获取光标</button>
          
          </div>
        )
      }
    }

    class Child extends React.Component{

      render(){
        return(
          <div>
          {/*
            <input ref={(el)=>{this.props.myFn(el)}}/>
          */}
            {/*会自动执行*/}
            <input ref={this.props.myFn}/>
          </div>
        )
      }
    }


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

11-非受控组件

<div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //非受控组件
    class App extends React.Component{
      
      render(){
        return(
          <div>
            <input ref={el=>this.input=el} onChange={(e)=>{this.msg=e.target.value;this.forceUpdate()}}/>
            {/*输入什么就绑定什么，其实用非受控组件更方便   不是用状态来存值*/}
            <p>{this.msg}</p>
            <button onClick={()=>{alert(this.input.value)}}>按钮</button>
          
          </div>
        )
      }
    }

    

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

18-状态

<div id="root"></div>
  <script src='./babel.min.js'></script>
  <script src='./react.js'></script>
  <script src='./react-dom.js'></script>
  <script type="text/babel">
    
  //react中的MVVM
  class App extends React.Component{
    constructor(props){
      super(props)
      this.state={
        msg:''
           }
    }
    change=(e)=>{
      this.setState({
        msg:e.target.value
      })
    }
    render(){
      return (
        <div>
          <input onKeyUp={this.change}/>
          <p>{this.state.msg}</p>
        </div>
      )
    }
  }
  
  ReactDOM.render(<App />,document.getElementById('root'))
  </script>