react中的事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<title>react中的事件处理</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
class MyComponent extends React.Component{
render() {
return (
<div>
<input ref={this.input} type="text" placeholder="输入内容"/>
<button onClick={this.handleBtn1}>按钮1</button>
<input onBlur={this.handleBtn2} type="text" placeholder="失去焦点"/>
</div>
)
}
input = (currentNode) => {
this.input1 = currentNode
}
handleBtn1 = () => {
console.log('handleBtn1==',this.input1.value)
}
handleBtn2 = (event) => {
console.log('event:',event.target.value)
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('box'))
</script>
</body>
</html>
注意：
React采用事件委托的形式处理事件---提高效率React建议不要过度的使用ref。- 什么情况下可以省略
ref?- 发生事件的元素是操作的元素，此时可以使用回调函数的
event
- 发生事件的元素是操作的元素，此时可以使用回调函数的
- 什么情况下可以省略
