作用：
获取到某个指定的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();form组件onSubmit()常用
// 过时的使用方法，在未来版本中可能会被移除
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>
获取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>
<!--并不推荐过多使用-->
<!--第一：管理焦点，文本选择，媒体播放(媒体回放)-->
<!--第二：触发动画-->
<!--第三：集成第三方的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>
方式二：
export default class Search extends Component{ constructor(props){ super(props); this.state={ currentKeyValue: '' } } setCurrentKeyValue= (e) => { const currentKeyValue = e.target.value this.setState({ currentKeyValue }) } //点击查询按钮，将值传给父组件 search = () =>{ this.props.setKeyWorld(this.state.currentKeyValue); } render() { return ( <div> <input type="text" value={this.state.currentKeyValue} onChange={this.setCurrentKeyValue}/> <button onClick={this.search}>查询</button> </div> ); } }