React onClick/onChange传参(bind绑定)问题

目录

• React onClick/onChange传参(bind绑定)
• React基础语法与组件传参
• react 特点
• jsx 语法
• react组件
• 模板语法
• 事件
• state
• 表单的数据绑定
• 组件
• 解构
• dom 引用
• 总结

React onClick/onChange传参(bind绑定)

一般是通过 bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名

代码如下：

//被触发函数写法：
const onChange = (e) => {
    //操作
}
 
onChange={onChange}
or
onChange={onChange.bind(this)}

有参调用，代码如下：

//被触发函数写法：
const onChange = (index, e) => {
    //操作
}

传值调用：

onChange={onChange.bind(this, 0)}

onClick 传参方式同上，就不在此赘述了。

到此 React onClick/onChange 传参 （bind绑定）介绍完成。

React基础语法与组件传参

react 特点

• 构建用户界面的javascript库
• facebook 脸书出品
• 组件化
• 单向数据流
• 生命周期
• 虚拟dom
• hooks

jsx 语法

方便js中书写html模板,javascript与html混合写法

• 1. 只有个根节点
• 2. {} js表达式
• 3. {/* 注释内容*/}
• 4. className定义类名
• 6. 样式对象会自动展开
• 6. 数组可以包含html ,并自定展开

react组件

函数组件

function App(){
    return <div> ... </div>
}
export default App;

类组件

import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}
export default App

函数组件和类组件区别

1.函数组件通常展示

类组件通常做为容器

2.类组件可以有state,管理数据用类组件

函组件没有state

3.函组件没有this

类组件 有this

4.函数组件没有生命周期

类组件有生命周期

模板语法

文本

// 普通文本
 <h1 className="active">你好react</h1>
// html文本
 <div dangerouslySetInnerHTML={_html:html文本内容}></div>

条件渲染

{flag&&<h1>为true显示</h1>}
{flag?'true显示':'false显示'}

列表渲染

{list.map(item=><h3 key={item}>{item}</h3>)}

事件

// 和原生js事件一致 事件命名用驼峰式
onclick   // 原生
onClick   // react
onmouseover  // 原生
onMouseover  // react

// 事件总是要响应一个函数
<h1 oncClick={()=>{ alert("abc")}}>

// 事件响应 箭头函数
doit = ()=>{ alert("你好")}

// 事件响应定义好的函数
<h1 onClick={this.doit}>

state

• react组件的状态/数据
• this.setState({k:新的值})
• 当state发生变化,引用state的视图会自动更新

表单的数据绑定

changeMsg=e=>this.setState({msg:e.target.value})
<input  value={this.state.msg} onChange={this.changeMsg}>

组件

组件名称的首字母必须大写

组件传参示意图

定义组件

src/components/Steper.js

在App.js导入组件

import Steper from './components/Steper'

在App.js render函数中使用

<Steper></Steper>

组件传参

父传子 props

// 父组件传递
<Steper  num={5}>

// 子组件接收
props.num

默认参

Steper.defaultProps = {
    num:1
}

• 子传父，执行父组件的传递过来的props回调函数
• 子传父：执行回调函数

子传父

// 父组件 
// 定义函数并把函数传递给子组件
updateSize = (n)=>this.setState({size:n})  // 定义函数
<Steper updateSize={this.updateSize}>      // 传递给子组件

// 子组件
// 执行
props.updateSize()   // 相当于执行父组件的updateSize方法

组件的设计

容器组件

• 一个页面,一个容器组件
• 有state,处理state方法
• 数据中心,与数据处理组中心
• 类组件

视图组件

• 显示内容,一个视图组件
• 只有props没有state
• 函数组件

解构

dom 引用

// 1. 导入创建dom 引用的方法
import {createRef} from 'react'
// 2. 创建dom引用
var inp = createRef()
// 3. 引用
<input ref={inp}>
// 4. 获取值
inp.current.value
inp.current 当前引用的dom节点

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。