从数学的角度解读react组件的点击事件

来源：互联网发布：查杀木马软件编辑：程序博客网时间：2024/06/10 01:49

class App extends Component{    render(){        const { dispatch, visibleTodos, visibilityFilter } = this.props;         return (             <div>                 <AddTodo onAddClick={text=>dispatch(addTodo(text))}>                 </AddTodo>                 <TodoList  todos={visibleTodos} onTodoClick={index=>dispatch(completeTodo(index))} />                 <Footer                     filter={visibilityFilter}                     onFilterChange={nextFilter =>                         dispatch(setVisibilityFilter(nextFilter))                     } />             </div>         )    }}

AddTodo组件有一个属性就是

onAddClick={text=>dispatch(addTodo(text))

/** * Created by Administrator on 2017/1/18. */import React,{Component,PropTypes} from 'react'import {connect} from 'react-redux'import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../actions'import AddTodo from '../components/AddTodo'import TodoList from '../components/TodoList'import Footer from '../components/Footer'export default class AddTodo extends Component{    render(){        return (            <div>                <input type="text" ref="input"/>                <button onClick={(e)=>this.handleClick(e)}>add</button>            </div>        )    }    handleClick(e){        const node=this.refs.input        const text=node.value.trim()        this.props.onAddClick(text)        node.value=''    }    AddTodo.propType={        onAddClick:PropTypes.func.isRequired    }}

而AddTodo组件里有一个button，它的点击事件是handleClick

onClick={(e)=>this.handleClick(e)

在handleclick里调用了onAddClick

其实这就是类似于复合函数f(g(x))的概念

f()就是onAddClick

g()就是handleclick

复合函数的执行是从内到外的

所以

肯定是先执行handleclick，再执行onAddClick

在handleclick的函数体里得出g()的值text，再传给onAddClick

0 0