腳本之家服務器常用軟件

快捷導航

React onClick/onChange傳參(bind綁定)問題

更新時間：2023年02月12日 14:52:06 作者：BasicLab基礎(chǔ)架構(gòu)實驗室

這篇文章主要介紹了React onClick/onChange傳參(bind綁定)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

React onClick/onChange傳參(bind綁定)

一般是通過 bind 函數(shù)綁定 this，來傳遞參數(shù)的，沒有參數(shù)就是下面這種方式或者直接寫函數(shù)名

代碼如下：

//被觸發(fā)函數(shù)寫法：
const onChange = (e) => {
? ? //操作
}
?
onChange={onChange}
or
onChange={onChange.bind(this)}

有參調(diào)用，代碼如下：

//被觸發(fā)函數(shù)寫法：
const onChange = (index, e) => {
????//操作
}

傳值調(diào)用：

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

onClick 傳參方式同上，就不在此贅述了。

到此 React onClick/onChange 傳參（bind綁定）介紹完成。

React基礎(chǔ)語法與組件傳參

react 特點

構(gòu)建用戶界面的javascript庫
facebook 臉書出品
組件化
單向數(shù)據(jù)流
生命周期
虛擬dom
hooks

jsx 語法

方便js中書寫html模板,javascript與html混合寫法

1. 只有個根節(jié)點
2. {} js表達式
3. {/* 注釋內(nèi)容*/}
4. className定義類名
6. 樣式對象會自動展開
6. 數(shù)組可以包含html ,并自定展開

react組件

函數(shù)組件

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

函數(shù)組件和類組件區(qū)別

1.函數(shù)組件通常展示

類組件通常做為容器

2.類組件可以有state,管理數(shù)據(jù)用類組件

函組件沒有state

3.函組件沒有this

類組件有this

4.函數(shù)組件沒有生命周期

類組件有生命周期

模板語法

文本

// 普通文本
 <h1 className="active">你好react</h1>
// html文本
 <div dangerouslySetInnerHTML={_html:html文本內(nèi)容}></div>

條件渲染

{flag&&<h1>為true顯示</h1>}
{flag?'true顯示':'false顯示'}

列表渲染

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

事件

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

// 事件總是要響應一個函數(shù)
<h1 oncClick={()=>{ alert("abc")}}>

// 事件響應 箭頭函數(shù)
doit = ()=>{ alert("你好")}

// 事件響應定義好的函數(shù)
<h1 onClick={this.doit}>

state

react組件的狀態(tài)/數(shù)據(jù)
this.setState({k:新的值})
當state發(fā)生變化,引用state的視圖會自動更新

表單的數(shù)據(jù)綁定

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函數(shù)中使用

<Steper></Steper>

組件傳參

父傳子 props

// 父組件傳遞
<Steper  num={5}>

// 子組件接收
props.num

默認參

Steper.defaultProps = {
    num:1
}

子傳父，執(zhí)行父組件的傳遞過來的props回調(diào)函數(shù)
子傳父：執(zhí)行回調(diào)函數(shù)

子傳父

// 父組件 
// 定義函數(shù)并把函數(shù)傳遞給子組件
updateSize = (n)=>this.setState({size:n})  // 定義函數(shù)
<Steper updateSize={this.updateSize}>      // 傳遞給子組件

// 子組件
// 執(zhí)行
props.updateSize()   // 相當于執(zhí)行父組件的updateSize方法

組件的設(shè)計

容器組件

一個頁面,一個容器組件
有state,處理state方法
數(shù)據(jù)中心,與數(shù)據(jù)處理組中心
類組件

視圖組件

顯示內(nèi)容,一個視圖組件
只有props沒有state
函數(shù)組件

解構(gòu)

dom 引用

// 1. 導入創(chuàng)建dom 引用的方法
import {createRef} from 'react'
// 2. 創(chuàng)建dom引用
var inp = createRef()
// 3. 引用
<input ref={inp}>
// 4. 獲取值
inp.current.value
inp.current 當前引用的dom節(jié)點