表单组件两种类型：约束组件和无约束组件
1.无约束组件：
eg：
varMyForm= React.createClass({
render： function() {
return <input type="text" defaultValue="Hello World!"/>;
}
});
组件的value并非由父组件设置，而是让<input/>自己控制自己的值。
一个无约束的组件没有太大用处，除非可以访问它的值。可以通过给<input/>添加一个ref属性以访问到DOM节点的值。ref是一个不属于DOM属性的特殊属性。可以通过this上下文访问这个节点，所有的ref都添加到了this.refs上。
eg：调用value：
MyFormReact.createClass({
submitHandler： function(event) {
event.preventDefault();
//通过ref访问输入框
var helloTo = this.refs.helloTo.getDOMNode().value;
alert(helloTo);
}
render: function() {
return (
form onSubmit={this.submitHandler}>
ref="helloTo" />
br button ="submit">Speak</buttonform>
);
}
});
2.约束组件：
约束组件的模式与React其他类型组件的模式一致。表单的状态交由React组件控制。状态值被存储在React组件的state中。
约束组件能更好的控制表单组件。在约束组件中，输入框的值是由父组件社设置的。
eg：
React.createClass({
getInitialState： function() {
return {
helloTo: "Hello World!"
};
}
handleChange： function(event){
this.setState({
helloTo: event.target.value
});
}
submitHandler： function(event) {
event.preventDefault();
ref访问输入框
alert(this.state.helloTo);
}
render： function() {
valuehelloTo} onChangethis.handleChange}>
);
}
});
约束组件可以控制数据流，在用户输入数据时更新state。如将用户输入的字符转成变大写（如：this.setState({helloTo: event.target.value.toUpperCase()});）并添加到输入框时不会发生闪烁。这是因为React拦截了浏览器原生的change事件，在setState被调用后，这个组件就会重新渲染输入框。然后React计算差异，更新输入框的值。
3.表单事件：
React支持所有HTML事件。这些事件遵循驼峰命名的约定，且会被转成合成事件。这些事件是标准化的，提供了跨浏览器的一致接口。
所有合成事件都提供了event.target来访问触发事件的DOM节点。
访问约束组件最简单的方式之一：
handleEvent： function(syntheticEvent) {
DOMNode = syntheticEvent.target;
newValue = DOMNode.value;
}
4.Label：
Label是表单元素中重要组件，可以明确地向用户传达你的要求，提升单选框和复选框的可用性。
React中class变成className，for变为htmlFor：
<label className="col-sm-3 control-label no-padding-right">开户行<span className="red">*</span></label>
5.文本框和Select：
React中的<textarea/>和<select/>：（约束的）
<textarea value={this.state.value} onChange={this.handleChange} />
select state.value} this.handleChange}option ="grapefruit">Grapefruitoption="lime">Lime="coconut">Coconut="mango">Mangoselect>
当使用多选的select时，select组件的值不会更新，只有选项的selected属性会发生变化。可以使用ref或event.target来访问选项，检查它们是否被选中。
eg：
handleChange： function(event) {
checked = [];
sel = event.target;
for(i = 0; i < sel.length; i++) {
value = sel.value[i];
if (value.selected) {
checked.push(value.value);
}
}
}
6.复选框和单选框：
类型为checkBox或radio的<input/>与类型为text的<input/>的行为完全不一样。通常复选框和单选框的值是不变的，只有checked状态会变化。所以要控制复选框或单选框就要控制它们的checked属性。也可以在非约束的复选框或者单选框中使用defaultChecked。
="checkBox" className="ace"
checkedoutboundLogisticsStatus == "SENTED"}
handleLogisticsStatusChange}span ="lbl">推送出库单
span
7.表单元素的name属性：
在React中，name属性对于表单元素来说并没有那么重要，因为约束表单组件已经把值存储到了state中，并且表单的提交事件也会被拦截。在获取表单值的时候，name属性并不是必须的。对于非约束的表单组件来说，也可以使用refs来直接访问表单元素。
那么属性的作用：
-- name属性可以让第三方表单序列化类库在React中正常工作；
-- 对于仍然使用传统提交方式的表单来说，name属性是必须的；
-- 在用户浏览器中，name被用在自动填写常用信息中，比如用户地址；
-- 对于非约束的单选框组件，name是有必要的，它可以作为这些组件分组的依据，确保在同一时刻，同一个表单中拥有相同name的单选框只有一个可以被选中。如果不使用name属性，这一行为可以使用约束的单选框实现。
8.多个表单元素与change处理器：
重用事件处理器：
-- 通过.bind传递其他参数
var MyForm = React.createClass({
getInitialState: function () {
given_name: "",
family_name: ""
};
},
handleChange: function (name,event) {
newState = {};
newState[name] = event.target.value;
this.setState(newState);
},67);">submitHandler: function (event) {
event.preventDefault();
words = [
"Hi",
given_name,122);font-weight:bold;">family_name
];
alert(words.join(" "));
},67);">render: submitHandler}label htmlFor="given_name">Given Name:labelinput
="text"
name="given_name"
given_name}
handleChange.bind(this,'given_name')}="family_name">Family Name:="family_name"
family_name}
'family_name')}>;
}
});
-- 使用DOMNode的name属性来判断需要更新哪个组件的状态
function (event) {
newState[event.target.name] = event.target.value;
>;
}
});
-- React.addons.LinkedStateMixmin为组件提供一个linkState方法。linkState返回一个对象，包含value和requestChange两个属性。
requestChange是一个函数，使用新的值更新同名的state
eg：
this.linkState('given_name');
//返回
{
value:this.state.given_name
requestChange: function (newValue) {
this.setState({
given_name: newValue
});
},
}
需要把这个对象传递给一个React特有的非DOM属性valueLink。valueLink使用对象提供的value更新表单域的值，并提供一个onChange处理器，当表单域更新时使用新的值调用requestChange。
MyForm = React.createClass({
mixins: [React.addons.LinkedStateMixin],122);font-weight:bold;"> valueLinkthis.linkState('given_name')} 'family_name')} >;
}
});
这种方法便于控制表单域，把其值保存在父组件中的state中。而且，其数据流仍然与其他约束的表单元素保持一致。
但是使用这种方式往数据流中添加定制功能时，复杂度会增加。建议只在特定的场景下使用。因为传统约束表单组件提供了同样的功能且更加灵活。
9.自定义表单组件：
可以在项目中复用共有功能。也是一种将交互界面提升为一种更加复杂的表单组件（如单选框、多选框）的好方法。
eg：自定义表单单选框和valueLink结合使用：
div ="col-sm-10"PaymentDistrictSelect linkState('paymentDistrictCode')}div
10.Focus：
控制表单组件的focus可以很好地引导用户按照表单逻辑逐步填写。可减少用户操作，增强可用性。
11.可用性：
12.传达要求：
placeholder可以用来显示输入实例或作为没有输入时的默认值
<inputtype="text"name="keyword"placeholder="对账单号/预付单号"valueLink={this.linkState("keyword")}style={{width:'100%'}}/>