react基礎事件 小案例

事件的繫結(三種方法)

① 方法不加括號

事件帶括號會自動執行方法

普通執行事件不帶括號 this.方法 將函式改為箭頭函式

② 方法加括號

this.方法.bind(this) 用bind將當前的this傳過去

③在constructor 中寫 this.方法=this.方法.bind(this)

預設最後乙個引數為事件的執行引數

可以用到 e.target e.pagex e.clientx e.timestamp

import react,

from
'react'
;class
header
extends
component
;this
.getinfo=
this
.getinfo.
bind
(this);
}getmsg=(
)=>
getmsgtwo=(
)=>
getinfo()
send
(a,b,e)
render()
>按鈕<
/button>
>按鈕2
<
/button>
>按鈕3
<
/button>
>按鈕4
<
/button>
<
/div>);
}}export
default header;

在react中資料是單向傳遞的,需要我們自己做資料雙向

1） 先給元素設定ref=「name」

2） 在去方法裡直接寫this.refs.name 的具體操作

import react,

from
'react'
;class
header
extends
component;}
getref()
render()
>獲取dom元素<
/button>
<
/div>);
}}export
default header;

① input文字框中要寫onchange事件

② onchange事件中利用e寫資料雙向問題

③ react中設定state引數時必須用this.setstate() 去設定

因為state是乙個物件，所以( )裡邊也是乙個物件

this.state.biaodan=val;表面看起來可以，實際上是錯誤的

import react,

from
'react'
;import
'./header.css'
class
header
extends
component,,
,]}}
//表單事件資料雙向問題
getbiaodan
(e));}
//核取方塊事件
getcheck
(index,e)
)        console.
log(e.target.value);}
render()
>
"checkbox" checked=
value=
onchange=
/>
<
/li>)}
)}<
/ul>
//普通文字框輸入
<
/p>
onchange=
/>
<
/div>);
}}export
default header;

設定表單元素：select,input,checkbox,textarea寫value讓你onchange監聽

限制性約束 （value（通過react實現雙向繫結的值））

非限制性約束（defaultvalue 相當於原生的value）

① 限制性約束

有些表單元素上的value屬性被限制，要用onchange事件來解決資料問題

以前寫的input中的value屬性和react中的value屬性不一樣，以前的value在react中是defaultvalue

② 非限制性約束

在這裡插入**片

React書城小案例

步驟1 api介面設定 步驟2 通過axios 設定好獲取資料的方法import axios from index.js const getbanner let initparams const getcourselist params initparams const getcourseinfo ...

測試基礎小案例

關於412教室 功能測試 1 能容納多少人 2 採光好不好，明亮度高不高 3 牆壁牢不牢固，隔音效果如何 4 能放多少桌子，椅子，容量多少 5 室內溫度如何，通風感強不強 介面測試 1 牆面與窗的比例是否合理 2 牆面是否有凹凸不平 3 牆面顏色是否合理，不掉漆，無縫隙 4 不透風，不漏雨 效能測試...

React 小案例 列表新增刪除功能

import react,from react class todolist extends component handlebtncilck handleinputchange e handleitemclick index render export default todolist複製 thi...