reactjs组件实例三大属性之refs属性代码示例：回调ref中回调执行次数的问题

你的名字 2024-02-17 13:35 18阅读 0赞

这是一个使用React库创建的组件，包含state、生命周期函数、事件处理函数以及DOM操作。组件中包括一个输入框和两个按钮，点击按钮可以切换天气和显示输入框的值。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>3_回调ref中回调执行次数的问题</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>
    
    	<script type="text/babel">
    		//创建组件
    		class Demo extends React.Component{
          
    
    			state = {
          isHot:false}
    
    			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>
    						{
          /*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
    						<input ref={
          this.saveInput} type="text"/><br/><br/>
    						<button onClick={
          this.showInfo}>点我提示输入的数据</button>
    						<button onClick={
          this.changeWeather}>点我切换天气</button>
    					</div>
    				)
    			}
    		}
    		//渲染组件到页面
    		ReactDOM.render(<Demo/>,document.getElementById('test'))
    	</script>
    </body>
    </html>