<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/babel">
//不推荐了已经
class Demo extends React.Component{
showData=()=>{
alert(this.input1.value);
}
showData2=()=>{
//onBlur 失去焦点
alert(this.ipt2.value)
}
render() {
return(
<div>
<input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder="点击按钮提示数据"/>
<button ref="btn" onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={c=>{this.ipt2=c}} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.querySelector("#test"))
</script>
浙公网安备 33010602011771号