React之回调ref中回调执行次数的问题
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>3_回調ref中回調執行次數的問題</title>
</head>
<body>
? ? <!-- 準備好一個容器 -->
? ? <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轉為js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此處一定要寫babel -->
? ? <script type="text/babel">
? ? ? ? //1.創建組件
? ? ? ? class Demo extends React.Component{
? ? ? ? ? ? state = {isHot:true}
? ? ? ? ? ? showInfo = ()=>{
? ? ? ? ? ? ? ? const {input1} = this
? ? ? ? ? ? ? ? alert(input1.value)
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ? changeWeather = ()=>{
? ? ? ? ? ? ? ? //獲取原來的狀態
? ? ? ? ? ? ? ? const {isHot} = this.state
? ? ? ? ? ? ? ? //更新狀態
? ? ? ? ? ? ? ? this.setState({isHot:!isHot})
? ? ? ? ? ? } ?
? ? ? ? ? ? saveInput = (c) =>{
? ? ? ? ? ? ? ? this.input1 = c;
? ? ? ? ? ? ? ? console.log('@', c); ? ? ? ? ? ? ? ?
? ? ? ? ? ? } ? ? ?
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ?const {isHot} = this.state
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? <h2>今天天氣很{isHot ? '炎熱' : '冰爽'}</h2>
? ? ? ? ? ? ? ? ? ? ?{/* ? ? ? ? ?jsx注釋如下 ? ? ? ? */}
? ? ? ? ? ? ? ? ?{/*<input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>*/}
? ? ? ? ? ? ? ? ? ? <input ref={this.saveInput} type="text"></input><br />
? ? ? ? ? ? ? ? ? ? <button onClick={this.showInfo}>點我提示輸入的數據</button>
? ? ? ? ? ? ? ? ? ? <button onClick={this.changeWeather}>點我切換天氣</button>
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?} ? ? ? ? ?
? ? ? ? } ?
? ? ? ? //2.渲染組件到頁面
? ? ? ? ReactDOM.render(<Demo/>,document.getElementById("test")); ?
? ? </script>
</body>
</html>
=================
類聯掉調2次（? ? ? ? ? ? ? ? <input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>）；第一次傳入參數?null，然后第二次會傳入參數 DOM 元素。這是因為在每次渲染時會創建一個新的函數實例，所以 React 清空舊的 ref 并且設置新的。
===
綁定函數不會
?
?
總結
以上是生活随笔為你收集整理的React之回调ref中回调执行次数的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 变量命名 – 匈利亚命名法则 - C语言
- 下一篇： BugkuCTF-MISC题贝斯手