聊一聊React的事件

事件

什么是事件

React 的事件处理和 DOM 元素类似。但是语法上是不同的:

1. React 事件绑定属性时采用驼峰命名法，而不是小写。
2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

事件的写法

HTML中的写法

<button onClick="addAge()">点我啊</button>

JSX中的写法

<button onClick={this.addAge}>点我啊</button>

我们在处理一些简单逻辑的时候，可以直接写要处理的事情

<button onClick={console.log("hello world")}>点我涨一岁</button>

但这种方式在逻辑比较复杂的情况下会造成代码不够简洁，不能够一目了然的看清代码，所以一般拉出去写一个函数

class App extends Component{
	addAge(){
        console.log(123)
    }
	render(){
        return (<div>
	            <button onClick={this.addAge}>点我啊</button>
	        </div>)
    };
}

this指向的问题

这里会牵扯到this指向的问题，比如说这段代码：

class App extends Component{
	addAge(){
        console.log(this)
    }
	render(){
        return (<div>
	            <button onClick={this.addAge}>点我啊</button>
	        </div>)
    };
}

浏览器反馈

通常这里最简单的处理方法是将函数替换为箭头函数，如下所示：

class App extends Component{
	addAge = ()=>{
        console.log(this)
    }
	render(){
        return (<div>
	            <button onClick={this.addAge}>点我啊</button>
	        </div>)
    };
}

浏览器反馈

state

state是什么

state——组件自身状态

state与props的区别是什么

1. state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
2. props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
3. state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

从实例中来学习state的使用

需求：将该列表实现点击缩进，再次点击弹出这样一功能

该列表基本代码

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

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

// app.js
import React,{Component} from "react";
import FriendList from './FriendList';

class App extends Component{
    render(){
        return (<div>
            <FriendList />
        </div>)
    };
}
export default App;
//==================================================================

// FriendList .js
import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dl'

export default class FriendList extends Component {
    render(){
        return (
            <div className="friend-list">
                {
                    Object.keys(data).map((item,index)=>{
                        return <Dl key={index} value={data[item]}/>
                    })
                }
            </div>
        )
    }
}
//==================================================================
// dl.js
import React,{Component} from "react";

export default class Dl extends Component{
	render() {
        let {title,list} = this.props.value
        return (
            <dl className="friend-group">
                <dt>{title}</dt>
                {
                    list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                    })
                }
            </dl>
        )
    }
}
//==================================================================

首先我们我们的需求是点击实现列表的收缩，所以我们需要给dt加一个点击事件，然后通过这个事件的触发来控制一个变量，从而让该列表实现收缩功能

1. 给dt添加点击事件

<dt onClick={this.showHide}>{title}</dt>

2. 点击事件控制变量

    constructor(props){
        super(props);
        this.state = {
            showOrHide:true,
        }
    }
    showHide = ()=>{
        this.setState(res => ({
            showOrHide : !res.showOrHide
        }))
    }

注意点：

• 当我们需要修改this.state 里边的值的时候，我们需要使用setState
• this.setState这个方法里使用箭头函数时，我们的this.state必须写在constructor里边

3. 是用三目运算符从而达成通过变量控制列表收缩

    render() {
        ...
        return (
            ...
                {
                    this.state.showOrHide ? list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                    }) : null
                }
            ...
        )
    }