<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br>
<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/babel.min.js"></script>
<script type="text/babel">
/*
* 需求：自定义组件，功能如下，
* 1.界面如页面所示
* 2.点击按钮，提示第一个输入框中的值
* 3.当第2个输入框失去焦点时，提示这个输入框中的值
* */
//定义组件
class Myconpont 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.value)
alert(this.input.value)
}
handleBlur(event){
alert(event.target.value)
console.log(event.target)
/*
* event为事件回调对象
* 属性;
* currentTarget 当前捕获节点的引用
* pageX事件发生点当前文档横坐标
* pageY事件发生点当前文档纵坐标
* target产生事件的节点引用
* type 当前事件类型如：click
* which针对键盘和鼠标事件，用于确定到底按了哪个
*
*.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>
)
}
}
//渲染组件标签
ReactDOM.render(<Myconpont/>,document.getElementById('example'))
</script>
</body>
</html>
</body>
</html>
react-refers
最新推荐文章于 2022-02-17 14:23:50 发布
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
