153-react绑定事件和状态属性

最新推荐文章于 2023-02-26 21:04:09 发布

Lich Howger

最新推荐文章于 2023-02-26 21:04:09 发布

阅读量182

点赞数

分类专栏： react js web

本文链接：https://blog.csdn.net/qq_33781658/article/details/85080827

版权

web 同时被 3 个专栏收录

50 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

react

14 篇文章 1 订阅

订阅专栏





react绑定事件和状态属性

React绑定事件和JavaScript中的行间事件类似
事件绑定是写在标签中的
但是React事件是在原生事件的基础上做了封装
它的事件用驼峰命名,而不是全部小写
事件需要传递一个函数作为事件处理程序
我们可以通过类定义组件
把函数作为方法定义在组件中




class Demo extends React.Component{
	fnHello(){
	alert('hello world');
	}

	render(){
	return (
	<input type="button" value="打招呼" onClick={this.fnHello} />
	)
	}
}

ReactDOM.render(<Demo />, document.getElementById('root'));





举个例子

<script type="text/babel">
	
class Demo extends React.Component{
	fnHello(){
	alert('hello');
	}

	render(){
	return(
	<input type="button" value="hello" onClick={this.fnHello} />
	);
	}
}

ReactDOM.render(<Demo />,document.getElementById('root'));
</script>






状态属性
组件的状态属性
状态属性默认名称是state
这个属性需要在组件定义的时候初始化
所以我们需要使用类的构造函数
来对这个属性进行初始化



定义一个点击按钮数字递增
class Increase extends React.Component{

constructor(props){
super(props);
this.state={num:10};
this.fnAdd=this.fnAdd.bind(this);
}

fnAdd(){
}

}



state的值可能是异步的
不能直接修改state的值
要使用setState

this.setState(prevState=>({

num:preState.num+1

}))



来个例子

class Increase extends React.Component{

constructor(props){
super(props);
this.state={num:10};
this.fnAdd=this.fnAdd.bind(this);
}

fnAdd(){
this.setState(prevState=>)
}

render(){
return(
	<div>
	<p> {this.state.num} </p>
	<input type="button" onClick={this.fnAdd} value="递增" />
	</div>
);
}

}




再来一次
实现功能

//导入react
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>


//body标签内
<body>
<div id="root"></div>
<script type="text/babel">


class Demo extends React.Component{

//构造函数
constructor(props){
	super(props);
	this.state={num:0};
}

//fnAdd递增
fnAdd(){
	//react中不能直接修改state的值
	//this.state.num +=1;   错误
	
	//设置state的值
	//将新的值传入,对state进行修改
	//this.setState({num:100});

	//prevState代表上一个state的值
	this.setState(function(prevState){
		return {num:prevState.num+1}
	});
}

//render
render(){return(
	<div>
	<p>{this.state.num}</p>
	<input type="button" value="递增"/>
	</div>
);}

}


ReactDOM.render(<Demo />,document.getElementById('root'));


</script>
</body>






我们现在来优化一下


//导入react
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>


//body标签内
<body>
<div id="root"></div>
<script type="text/babel">


class Demo extends React.Component{

//构造函数
constructor(props){
	super(props);
	this.state={num:0};
	
	//可以将绑定写在初始化
	this.fnAdd=this.fnAdd.bind(this);
}

//fnAdd递增
fnAdd(){
	//react中不能直接修改state的值
	//this.state.num +=1;   错误
	
	//设置state的值
	//将新的值传入,对state进行修改
	//this.setState({num:100});

	//prevState代表上一个state的值
	this.setState(
	(prevState)=>({num:preState.num+1})
	);
}

//render
render(){return(
	<div>
	<p>{this.state.num}</p>
	<input type="button" value="递增"/>
	</div>
);}

}


ReactDOM.render(<Demo />,document.getElementById('root'));


</script>
</body>

Lich Howger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
153-react绑定事件和状态属性

react绑定事件和状态属性React绑定事件和JavaScript中的行间事件类似事件绑定是写在标签中的但是React事件是在原生事件的基础上做了封装它的事件用驼峰命名,而不是全部小写事件需要传递一个函数作为事件处理程序我们可以通过类定义组件把函数作为方法定义在组件中class Demo extends React.Component{ fnHello(){...
复制链接

扫一扫