React.js中通过ref操作DOM

方法1：

class Aaa extends Component{

      componentDidMount(){

           this.refs.aaa.style.border = '5px solid yellow'

           this.refs.bbb.style.border = '5px solide red'

      }

     render(){

              return(

                  <div>

                       <input ref='aaa' value='sss'>

                       <input ref='bbb' value='sss'>

                  </div>

              )

     }

}

ReactDOM.render(<Aaa />,document.getElementById('root'));

方法2：

class Aaa extends Component{

      componentDidMount(){

           this.input.style.border = '5px solid yellow'

           this.eee.style.border = '5px solide red'

      }

     render(){

              return(

                  <div>

                       <input ref={(input) => this.input = input} value='sss'>

                       <input ref={(eee) => this.eee= eee} value='sss'>

                  </div>

              )

     }

}

ReactDOM.render(<Aaa />,document.getElementById('root'));