<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<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() {
alert(this.input.value)
}
handleBlur(event){
alert(event.target.value)
}
render() {
return (
<div>
<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>
原文地址：https://www.cnblogs.com/zhanzhuang/p/10704650.html
时间： 2024-11-01 11:07:45