react数据监听
神奇大叔 人气:0react 数据监听
监听组件传递的值:
componentWillReceiveProps(newProps) { 参数为给组件传递的参数 }
监听组件内部状态的变化:
componentDidUpdate(prevProps,prevState){ 参数分别为改变之前的数据状态对象 if(prevState.属性名!=this.state.属性名) { ... } }
react事件监听三种写法
方式一
在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> ); } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容