React之回调函数形式的ref
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>2_回調(diào)函數(shù)形式的ref</title>
</head>
<body>
? ? <!-- 準(zhǔn)備好一個容器 -->
? ? <div id="test"></div>
? ? <!-- 核心庫 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作dom -->
? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>
? ? <!-- 引入babel，jsx轉(zhuǎn)為js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此處一定要寫babel -->
? ? <script type="text/babel">
? ? ? ? //1.創(chuàng)建組件
? ? ? ? class Demo extends React.Component{
? ? ? ? ? ? //展示左側(cè)輸入框的數(shù)據(jù)
? ? ? ? ? ? showData = ()=>{ ? ? ? ?
? ? ? ? ? ? ? ? const {input1}=this
? ? ? ? ? ? ? ? alert(input1.value)
? ? ? ? ? ? } ? ?
? ? ? ? ? ? //展示右側(cè)輸入框的數(shù)據(jù)
? ? ? ? ? ? showData2 = () => {
? ? ? ? ? ? ? ?const { input2 } = this
? ? ? ? ? ? ? ?alert(input2.value)
? ? ? ? ? ? } ? ? ? ? ? ?
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? <input ref={c =>this.input1=c} type="text" pacleholder="點擊按鈕提示數(shù)據(jù)"/>
? ? ? ? ? ? ? ? ? ? ? ? <button onClick={this.showData}>點我提示左側(cè)的數(shù)據(jù)</button>
? ? ? ? ? ? ? ? ? ? ? ? <input onBlur={this.showData2} ref={c => this.input2 = c} type="text" pacleholder="失去焦點提示數(shù)據(jù)" />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?} ? ? ? ? ?
? ? ? ? } ?
? ? ? ? //2.渲染組件到頁面
? ? ? ? ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById("test")); ?
? ? </script>
</body>
</html>
====================
失去焦點時彈出：
總結(jié)
以上是生活随笔為你收集整理的React之回调函数形式的ref的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python frozenset 集合
- 下一篇： BugkuCTF-Reverse题不好用