表單大家都很清楚，input 框，select， radio 等， 在vue中的表單數繫結使用的是 v-model, v-model 是啥，乙個語法糖，用於雙向資料繫結而已，在react 中是沒有這樣的語法糖的，需要自己來手動實現
受控元件：元件的使用者，有能力完全控制該元件的行為和內容。通常情況下，受控元件往往沒有自身的狀態，其內容完全收到屬性的控制。
非受控元件：元件的使用者，沒有能力控制該元件的行為和內容，元件的行為和內容完全自行控制。
在react 表單元件中，預設情況下是非受控元件，一旦設定了表單元件的效果： 和 vue 一樣，雙向資料繫結，但是這個並沒有特殊的語法糖value屬性，則其變為受控元件(單選和多選框需要設定checked)
封裝的**如下：
input.tsx
import react from
'react'
/** * input 的屬性
*/inte***ce
iinputp
export
default
function
input
(props: iinputp)
name=
onchange=
/>
<
/>
)}
使用方式
import react,
from
'react'
import input from
'.'inte***ce
iinputtests
export
default
class
inputtest
extends
component
<
, iinputtests>
change
=(v:
any)
=>))
}render()
name=
'test' onchange=
>
<
/input>
<
/div>)}
}
這個資料繫結和 vue 的原理是一樣的，都是通過 元素的 value 值 和 change 事件來進行雙向資料繫結的，只是vue 中提供了特殊的語法糖 v-model
實現方法和上面的input 是一樣的
這個的實現方式有點不一樣，多選傳入的肯定是乙個陣列封裝的**如下：
checkboxgroup .tsx
import react,
from
'react'
/** * 每乙個radio的物件型別
*/type checkboxobj =
inte***ce
icheckboxgroupp
export
default
class
checkboxgroup
extends
component
>
type
='checkbox'
name=
checked=
value=
onchange=
/>
<
/label>)}
)}render()
<
/div>)}
}
使用方式
import react,
from
'react'
import checkboxgroup from
'.'/**
* 按鈕組
*/inte***ce
icheckboxgrouptests
/** * 每乙個radio的物件型別
html5 初探2 表單
乙個簡單的表單 by xufei 2013 04 css樣式，裡面有些 css3的東西 charset utf 8 body header footer select input content form 表單分組 form fieldset 表單分組 最後乙個 form fieldset last...
js中表單驗證中的任務執行順序初探
在寫線上運維平台中的表單處理邏輯時，遇到困擾的地方 驗證表單 checkform else console.log 1 checkresult this.refs topicinfo validate valid else console.log 2 checkresult 校驗topic名稱 le...
HTML5初探 新增的表單元素和屬性
html5初探 新增的表單元素和屬性 html5 新元素 表單元素 placeholder 屬性 一般用在文字框上 其主要作用是當文字框處於未輸入狀態並且內容為空時給文字框的提示內容 效果 當文字框獲取焦點時，提示資訊自動清空，失去焦點且未輸入內容時，提示資訊又自動出現 省去傳統的文字框需要借助 o...