012.組件實例的三大屬性之refs

時間  2021-08-13
標籤 javascript html java react babel markdown dom 函數 this 欄目 JavaScript 简体版
原文   原文鏈接

字符串形式的refs

第一個輸入框點擊按鈕alert數據，第二個輸入框失焦alert數據 image.png
來吧展現javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> class Demo extends React.Component{ // 展現左側輸入框的數據 showData=()=>{ // const input1 = document.getElementById('input1') const {input1} = this.refs alert(input1.value) } // 展現右側輸入框的數據 showData2=()=>{ const {input2} = this.refs alert(input2.value) } render(){ return ( <div id="test"> <input id="input1" ref="input1" type="text" placeholder="點擊提示數據"/> <button ref="btn1" onClick={this.showData}>點我啊</button> <input ref="input2" onBlur={this.showData2} type="text" placeholder="失焦提示數據"/> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

內聯回調函數式的refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> class Demo extends React.Component{ // 展現左側輸入框的數據 showData=()=>{ const {input1} = this alert(input1.value) } // 展現右側輸入框的數據 showData2=()=>{ const {input2} = this alert(input2.value) } render(){ return ( <div id="test"> <input ref={c=>this.input1 = c} type="text" placeholder="點擊提示數據"/> <button ref="btn1" onClick={this.showData}>點我啊</button> <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示數據"/> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

然鵝官方文檔說了，當狀態更新的時候回調函數會執行兩次，第一次返回null 第二次才返回DOM元素。爲啥呢？爲了清空狀態確保返回的DOM元素是最新的。好的來驗證一下吧html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> class Demo extends React.Component{ state={ isHot:true } // 展現左側輸入框的數據 showData=()=>{ const {input1} = this alert(input1.value) } // 展現右側輸入框的數據 showData2=()=>{ const {input2} = this alert(input2.value) } changeWeather=()=>{ const {isHot} = this.state this.setState({isHot:!isHot}) } render(){ const {isHot} = this.state return ( <div id="test"> <h1>今每天氣{isHot?'好熱啊臥槽':'好涼快蘇服'}</h1> <input ref={(c=>{console.log('@',c);this.input = c}) } type="text" placeholder="點擊提示數據"/> <button ref="btn1" onClick={this.showData}>點我啊</button> <button ref="btn2" onClick={this.changeWeather}>點我切換天氣</button> <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示數據"/> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

image.png

好的看文檔java

image.png

直接上絕活react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> class Demo extends React.Component{ state={ isHot:true } // 展現左側輸入框的數據 showData=(c)=>{ // const {input1} = this // alert(input1.value) } // 展現右側輸入框的數據 showData2=()=>{ const {input2} = this alert(input2.value) } changeWeather=()=>{ const {isHot} = this.state this.setState({isHot:!isHot}) } changeInput=(c)=>{ console.log("@",c) } render(){ const {isHot} = this.state return ( <div id="test"> <h1>今每天氣{isHot?'好熱啊臥槽':'好涼快蘇服'}</h1> {/*解決刷新state ref執行兩次的*/} <input ref={this.changeInput} type="text" placeholder="點擊提示數據"/> <button ref="btn1" onClick={this.showData}>點我啊</button> <button ref="btn2" onClick={this.changeWeather}>點我切換天氣</button> <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示數據"/> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

害 雖然執行了兩次但也不影響使用babel

createRef形式的refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> class Demo extends React.Component{ // React.createRef調用後會返回一個容器，該容器能夠存儲ref所標識的節點，該容器是"專人專用" myRef = React.createRef() myRef2 = React.createRef() // 展現左側輸入框的數據 showData=(c)=>{ alert(this.myRef.current.value) } showData2=(c)=>{ alert(this.myRef2.current.value) } render(){ return ( <div id="test"> <input ref={this.myRef} type="text" placeholder="點擊提示數據"/> <button onClick={this.showData}>點我啊</button> <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失焦提示數據"/> </div> ) } } ReactDOM.render(<Demo/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

須要綁定幾個ref就要生成幾個，有點** 可是官方比較推薦這種markdown

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程