目录React 数据监听react事件监听三种写法方式一方式二方式三react 数据监听 监听组件传递的值: componentWillReceiveProps(newProps)
监听组件传递的值:
componentWillReceiveProps(newProps)
{
参数为给组件传递的参数
}
监听组件内部状态的变化:
componentDidUpdate(prevProps,prevState){
参数分别为改变之前的数据状态对象
if(prevState.属性名!=this.state.属性名)
{
...
}
}
在constructor中使用bind绑定,改变this的指向
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
// 写法一:事件绑定改变this指向
this.showFunc = this.showFunc.bind(this);
}
// 调用该方法
showFunc() {
this.setState({
show: false
});
}
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={this.showFunc}>触发</button>
{result}
</div>
);
}
}
通过箭头函数改变this指向
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
}
// 第二种,通过箭头函数改变this指向
showFunc = () => {
this.setState({
show: false
});
};
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={this.showFunc}>触发</button>
{result}
</div>
);
}
}
直接使用箭头函数改变this的指向
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
}
// 调用该方法
showFunc() {
this.setState({
show: false
});
}
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={() => this.showFunc()}>触发</button>
{result}
</div>
);
}
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: react实现数据监听方式
本文链接: https://www.lsjlt.com/news/172116.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0