建站
咨詢
售后
建站咨詢
新聞中心
表單組件兩種類型：約束組件和無(wú)約束組件
1. 無(wú)約束組件：
eg：
var MyForm = React.createClass({
render： function() {
return ;
}
});
組件的value并非由父組件設(shè)置，而是讓自己控制自己的值。
一個(gè)無(wú)約束的組件沒(méi)有太大用處，除非可以訪問(wèn)它的值。可以通過(guò)給添加一個(gè)ref屬性以訪問(wèn)到DOM節(jié)點(diǎn)的值。ref是一個(gè)不屬于DOM屬性的特殊屬性?？梢酝ㄟ^(guò)this上下文訪問(wèn)這個(gè)節(jié)點(diǎn)，所有的ref都添加到了this.refs上。
eg：調(diào)用value：
var MyForm = React.createClass({
submitHandler： function(event) {
event.preventDefault();
//通過(guò)ref訪問(wèn)輸入框
var helloTo = this.refs.helloTo.getDOMNode().value;
alert(helloTo);
}
render: function() {
return (
);
}
});
2. 約束組件：
約束組件的模式與React其他類型組件的模式一致。表單的狀態(tài)交由React組件控制。狀態(tài)值被存儲(chǔ)在React組件的state中。
約束組件能更好的控制表單組件。在約束組件中，輸入框的值是由父組件社設(shè)置的。
eg：
var MyForm = React.createClass({
getInitialState： function() {
return {
helloTo: "Hello World!"
};
}
handleChange： function(event) {
this.setState({
helloTo: event.target.value
});
}
submitHandler： function(event) {
event.preventDefault();
//通過(guò)ref訪問(wèn)輸入框
alert(this.state.helloTo);
}
render： function() {
return (
);
}
});
約束組件可以控制數(shù)據(jù)流，在用戶輸入數(shù)據(jù)時(shí)更新state。如將用戶輸入的字符轉(zhuǎn)成變大寫（如：this.setState({helloTo: event.target.value.toUpperCase()});）并添加到輸入框時(shí)不會(huì)發(fā)生閃爍。這是因?yàn)镽eact攔截了瀏覽器原生的change事件，在setState被調(diào)用后，這個(gè)組件就會(huì)重新渲染輸入框。然后React計(jì)算差異，更新輸入框的值。
3. 表單事件：
React支持所有HTML事件。這些事件遵循駝峰命名的約定，且會(huì)被轉(zhuǎn)成合成事件。這些事件是標(biāo)準(zhǔn)化的，提供了跨瀏覽器的一致接口。
所有合成事件都提供了event.target來(lái)訪問(wèn)觸發(fā)事件的DOM節(jié)點(diǎn)。
訪問(wèn)約束組件最簡(jiǎn)單的方式之一：
handleEvent： function(syntheticEvent) {
var DOMNode = syntheticEvent.target;
var newValue = DOMNode.value;
}
4. Label：
Label是表單元素中重要組件，可以明確地向用戶傳達(dá)你的要求，提升單選框和復(fù)選框的可用性。
React中class變成className，for變?yōu)閔tmlFor：
5. 文本框和Select：
React中的和：（約束的）
多選時(shí)可在select后加上multi={true}屬性
當(dāng)使用多選的select時(shí)，select組件的值不會(huì)更新，只有選項(xiàng)的selected屬性會(huì)發(fā)生變化?？梢允褂胷ef或event.target來(lái)訪問(wèn)選項(xiàng)，檢查它們是否被選中。
eg：
handleChange： function(event) {
var checked = [];
var sel = event.target;
for(var i = 0; i < sel.length; i++) {
var value = sel.value[i];
if (value.selected) {
checked.push(value.value);
}
}
}
6. 復(fù)選框和單選框：
類型為checkbox或radio的與類型為text的的行為完全不一樣。通常復(fù)選框和單選框的值是不變的，只有checked狀態(tài)會(huì)變化。所以要控制復(fù)選框或單選框就要控制它們的checked屬性。也可以在非約束的復(fù)選框或者單選框中使用defaultChecked。
checked={this.state.outboundLogisticsStatus == "SENTED"}
onChange={this.handleLogisticsStatusChange}/>
推送出庫(kù)單
7. 表單元素的name屬性：
在React中，name屬性對(duì)于表單元素來(lái)說(shuō)并沒(méi)有那么重要，因?yàn)榧s束表單組件已經(jīng)把值存儲(chǔ)到了state中，并且表單的提交事件也會(huì)被攔截。在獲取表單值的時(shí)候，name屬性并不是必須的。對(duì)于非約束的表單組件來(lái)說(shuō)，也可以使用refs來(lái)直接訪問(wèn)表單元素。
那么屬性的作用：
-- name屬性可以讓第三方表單序列化類庫(kù)在React中正常工作；
-- 對(duì)于仍然使用傳統(tǒng)提交方式的表單來(lái)說(shuō)，name屬性是必須的；
-- 在用戶瀏覽器中，name被用在自動(dòng)填寫常用信息中，比如用戶地址；
-- 對(duì)于非約束的單選框組件，name是有必要的，它可以作為這些組件分組的依據(jù)，確保在同一時(shí)刻，同一個(gè)表單中擁有相同name的單選框只有一個(gè)可以被選中。如果不使用name屬性，這一行為可以使用約束的單選框?qū)崿F(xiàn)。
8. 多個(gè)表單元素與change處理器：
重用事件處理器：
-- 通過(guò).bind傳遞其他參數(shù)
var MyForm = React.createClass({
getInitialState: function () {
return {
given_name: "",
family_name: ""
};
},
handleChange: function (name, event) {
var newState = {};
newState[name] = event.target.value;
this.setState(newState);
},
submitHandler: function (event) {
event.preventDefault();
var words = [
"Hi",
this.state.given_name,
this.state.family_name
];
alert(words.join(" "));
},
render: function () {
return
;}
});
-- 使用DOMNode的name屬性來(lái)判斷需要更新哪個(gè)組件的狀態(tài)
var MyForm = React.createClass({
getInitialState: function () {
return {
given_name: "",
family_name: ""
};
},
handleChange: function (event) {
var newState = {};
newState[event.target.name] = event.target.value;
this.setState(newState);
},
submitHandler: function (event) {
event.preventDefault();
var words = [
"Hi",
this.state.given_name,
this.state.family_name
];
alert(words.join(" "));
},
render: function () {
return
;}
});
-- React.addons.LinkedStateMixmin為組件提供一個(gè)linkState方法。linkState返回一個(gè)對(duì)象，包含value和requestChange兩個(gè)屬性。
value根據(jù)提供的name屬性從state中獲取對(duì)應(yīng)的值
requestChange是一個(gè)函數(shù)，使用新的值更新同名的state
eg：
this.linkState('given_name');
//返回
{
value: this.state.given_name
requestChange: function (newValue) {
this.setState({
given_name: newValue
});
},
}
需要把這個(gè)對(duì)象傳遞給一個(gè)React特有的非DOM屬性valueLink。valueLink使用對(duì)象提供的value更新表單域的值，并提供一個(gè)onChange處理器，當(dāng)表單域更新時(shí)使用新的值調(diào)用requestChange。
var MyForm = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function () {
return {
given_name: "",
family_name: ""
};
},
submitHandler: function (event) {
event.preventDefault();
var words = [
"Hi",
this.state.given_name,
this.state.family_name
];
alert(words.join(" "));
},
render: function () {
return
;}
});
這種方法便于控制表單域，把其值保存在父組件中的state中。而且，其數(shù)據(jù)流仍然與其他約束的表單元素保持一致。
但是使用這種方式往數(shù)據(jù)流中添加定制功能時(shí)，復(fù)雜度會(huì)增加。建議只在特定的場(chǎng)景下使用。因?yàn)閭鹘y(tǒng)約束表單組件提供了同樣的功能且更加靈活。
9. 自定義表單組件：
可以在項(xiàng)目中復(fù)用共有功能。也是一種將交互界面提升為一種更加復(fù)雜的表單組件（如單選框、多選框）的好方法。
eg：自定義表單單選框和valueLink結(jié)合使用：
10. Focus：
控制表單組件的focus可以很好地引導(dǎo)用戶按照表單邏輯逐步填寫?？蓽p少用戶操作，增強(qiáng)可用性。
11. 可用性：
React組件常常缺乏可用性。如缺乏對(duì)鍵盤操作的支持。
12. 傳達(dá)要求：
placeholder可以用來(lái)顯示輸入實(shí)例或作為沒(méi)有輸入時(shí)的默認(rèn)值
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前題目：React表單-創(chuàng)新互聯(lián)
分享地址：http://www.dlmjj.cn/article/dijdgj.html
