重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
React表单-创新互联
表单组件两种类型：约束组件和无约束组件
1. 无约束组件：
eg：
var MyForm = React.createClass({
render： function() {
return ;
}
});
组件的value并非由父组件设置，而是让自己控制自己的值。
一个无约束的组件没有太大用处，除非可以访问它的值。可以通过给添加一个ref属性以访问到DOM节点的值。ref是一个不属于DOM属性的特殊属性。可以通过this上下文访问这个节点，所有的ref都添加到了this.refs上。
eg：调用value：
var MyForm = React.createClass({
submitHandler： function(event) {
event.preventDefault();
//通过ref访问输入框
var helloTo = this.refs.helloTo.getDOMNode().value;
alert(helloTo);
}
render: function() {
return (
);
}
});
2. 约束组件：
约束组件的模式与React其他类型组件的模式一致。表单的状态交由React组件控制。状态值被存储在React组件的state中。
约束组件能更好的控制表单组件。在约束组件中，输入框的值是由父组件社设置的。
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();
//通过ref访问输入框
alert(this.state.helloTo);
}
render： function() {
return (
);
}
});
约束组件可以控制数据流，在用户输入数据时更新state。如将用户输入的字符转成变大写（如：this.setState({helloTo: event.target.value.toUpperCase()});）并添加到输入框时不会发生闪烁。这是因为React拦截了浏览器原生的change事件，在setState被调用后，这个组件就会重新渲染输入框。然后React计算差异，更新输入框的值。
3. 表单事件：
React支持所有HTML事件。这些事件遵循驼峰命名的约定，且会被转成合成事件。这些事件是标准化的，提供了跨浏览器的一致接口。
所有合成事件都提供了event.target来访问触发事件的DOM节点。
访问约束组件最简单的方式之一：
handleEvent： function(syntheticEvent) {
var DOMNode = syntheticEvent.target;
var newValue = DOMNode.value;
}
4. Label：
Label是表单元素中重要组件，可以明确地向用户传达你的要求，提升单选框和复选框的可用性。
React中class变成className，for变为htmlFor：
5. 文本框和Select：
React中的和：（约束的）
多选时可在select后加上multi={true}属性
当使用多选的select时，select组件的值不会更新，只有选项的selected属性会发生变化。可以使用ref或event.target来访问选项，检查它们是否被选中。
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. 复选框和单选框：
类型为checkbox或radio的与类型为text的的行为完全不一样。通常复选框和单选框的值是不变的，只有checked状态会变化。所以要控制复选框或单选框就要控制它们的checked属性。也可以在非约束的复选框或者单选框中使用defaultChecked。
checked={this.state.outboundLogisticsStatus == "SENTED"}
onChange={this.handleLogisticsStatusChange}/>
推送出库单
7. 表单元素的name属性：
在React中，name属性对于表单元素来说并没有那么重要，因为约束表单组件已经把值存储到了state中，并且表单的提交事件也会被拦截。在获取表单值的时候，name属性并不是必须的。对于非约束的表单组件来说，也可以使用refs来直接访问表单元素。
那么属性的作用：
-- name属性可以让第三方表单序列化类库在React中正常工作；
-- 对于仍然使用传统提交方式的表单来说，name属性是必须的；
-- 在用户浏览器中，name被用在自动填写常用信息中，比如用户地址；
-- 对于非约束的单选框组件，name是有必要的，它可以作为这些组件分组的依据，确保在同一时刻，同一个表单中拥有相同name的单选框只有一个可以被选中。如果不使用name属性，这一行为可以使用约束的单选框实现。
8. 多个表单元素与change处理器：
重用事件处理器：
-- 通过.bind传递其他参数
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属性来判断需要更新哪个组件的状态
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为组件提供一个linkState方法。linkState返回一个对象，包含value和requestChange两个属性。
value根据提供的name属性从state中获取对应的值
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。
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中。而且，其数据流仍然与其他约束的表单元素保持一致。
但是使用这种方式往数据流中添加定制功能时，复杂度会增加。建议只在特定的场景下使用。因为传统约束表单组件提供了同样的功能且更加灵活。
9. 自定义表单组件：
可以在项目中复用共有功能。也是一种将交互界面提升为一种更加复杂的表单组件（如单选框、多选框）的好方法。
eg：自定义表单单选框和valueLink结合使用：
10. Focus：
控制表单组件的focus可以很好地引导用户按照表单逻辑逐步填写。可减少用户操作，增强可用性。
11. 可用性：
React组件常常缺乏可用性。如缺乏对键盘操作的支持。
12. 传达要求：
placeholder可以用来显示输入实例或作为没有输入时的默认值
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：React表单-创新互联
文章来源：http://cqcxhl.com/article/dijdgj.html