0409-暴露DOM元素.html_html-js-css

概述<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 e

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