首页 > 网络编程 > JavaScript > javascript类库 > React > React onClick/onChange传参

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

2023-02-12 14:52:06 作者：BasicLab基础架构实验室

这篇文章主要介绍了React onClick/onChange传参(bind绑定)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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节点

总结

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

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