九. refs和事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>refs和事件处理</title>
</head>
<body>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<!--这个库是用于限定输入时的数据类型,-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
<div id="example"></div>
<script type="text/babel">
/*
需求:自定义组件,功能说明如下:
1. 界面如页面所示
2. 点击按钮,提示第一个输入框中的值
3. 当第2个输入框失去焦点时,提示这个输入框中的值
*/
//1. 定义组件
class MyComponent extends React.Component {
constructor (props) {
super(props);
this.showInput = this.showInput.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
showInput () {
const input = this.refs.content
alert(this.input.value)
}
handleBlur (event) {
alert(event.target.value)
}
render (){
return (
<div>
<input type="text" ref="content"/>
<input type="text" ref= {input => this.input = input} />
<button onClick={this.showInput}>提示输入</button>
<input type="text" placeholder="失去焦点提示内容" onBlur= {this.handleBlur}/>
</div>
)
}
}
//2. 渲染组件标签
ReactDOM.render(<MyComponent/>, document.getElementById('example'))
</script>
</body>
</html>
十. 组件组合使用_初始化显示