作用:
获取到某个指定的dom。
用处(并不推荐过多使用):
第一:管理焦点,文本选择,媒体播放(媒体回放)
第二:触发动画
第三:集成第三方的DOM库
用法DEMO:
点击submit按钮,会将input的值打印到控制台上,但是要注意,这种方式已经过时。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> </head> <body> <!--react基础库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script> <!--bable转换库,ES语法以及Jax语法的转换--> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div> <script type="text/babel"> //定义组件 class Component extends React.Component{ //构造函数,在初始化组件的时候会执行 constructor(props){ super(props); this.state={ name:'tom', age:20 } this.handleSubmit=this.handleSubmit.bind(this) } //出发事件获取dom以及属性的值 handleSubmit(e) { //e.preventDefault(); // 过时的使用方法,在未来版本中可能会被移除 let inputDom = this.refs.name; //控制台打印prop的值 console.log(inputDom.value); } render() { // 1、给input标签添加ref属性标记 return( <form onSubmit={this.handleSubmit}> <input type="text" ref="name" /> <button type="submit">Submit</button> </form> ); } } ReactDOM.render(<Component />,document.getElementById("content")); </script> </body> </html>
新的写法:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> </head> <body> <!--react基础库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script> <!--bable转换库,ES语法以及Jax语法的转换--> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div> <!--并不推荐过多使用--> <!--第一:管理焦点,文本选择,媒体播放(媒体回放)--> <!--第二:触发动画--> <!--第三:集成第三方的DOM库--> <script type="text/babel"> //定义组件 class Component extends React.Component{ //构造函数,在初始化组件的时候会执行 constructor(props){ super(props); this.state={ name:'tom', age:20 } this.handleSubmit=this.handleSubmit.bind(this) } //出发事件获取dom以及属性的值 handleSubmit() { console.log(this.inputName.value); } render() { // 1、给input标签添加ref属性标记 return( <div > <input type="text" ref={(input) => { this.inputName = input }} /> <button type="submit" onClick={this.handleSubmit}>Submit</button> </div> ); } } ReactDOM.render(<Component />,document.getElementById("content")); </script> </body> </html>