012.組件實例的三大屬性之refs
字符串形式的refs
第一個輸入框點擊按鈕alert數據，第二個輸入框失焦alert數據 
來吧展現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>
複製代碼
好的看文檔java
直接上絕活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
相關文章
- 1. 011.組件實例三大屬性之props
- 2. Vue 組件實例屬性的使用
- 3. react 中的 三大重要屬性state refs props
- 4. React 學習筆記（一）：JSX；工廠函數組件、ES6類組件；三大屬性（state、props、refs）
- 5. transform三大屬性之scale
- 6. vue組件之屬性Props
- 7. 012 三大特性與背景
- 8. vue之實例屬性（一）
- 9. Python 類的屬性與實例屬性
- 10. python的類屬性和實例屬性
- 更多相關文章...
- • Spring實例化Bean的三種方法 - Spring教程
- • MyBatis的核心組件 - MyBatis教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
