您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
表单组件两种类型：约束组件和无约束组件
1. 无约束组件：
eg：
var MyForm = React.createClass({
render： function() {
return <input type="text" defaultValue="Hello World!"/>;
}
});
组件的value并非由父组件设置，而是让<input/>自己控制自己的值。
一个无约束的组件没有太大用处，除非可以访问它的值。可以通过给<input/>添加一个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 (
<form onSubmit={this.submitHandler}>
<input ref="helloTo" type="text" defaultValue="Hello World!"/>
<br />
<button type="submit">Speak</button>
</form>
);
}
});
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 (
<form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange}/>
<br />
<button type="submit">Speak</button>
</form>
);
}
});
约束组件可以控制数据流，在用户输入数据时更新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：
<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 value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
多选时可在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的<input/>与类型为text的<input/>的行为完全不一样。通常复选框和单选框的值是不变的，只有checked状态会变化。所以要控制复选框或单选框就要控制它们的checked属性。也可以在非约束的复选框或者单选框中使用defaultChecked。
<input type="checkbox" className="ace"
checked={this.state.outboundLogisticsStatus == "SENTED"}
onChange={this.handleLogisticsStatusChange}/>
<span className="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 () {
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 <form onSubmit={this.submitHandler}>
<label htmlFor="given_name">Given Name:</label>
<br />
<input
type="text"
name="given_name"
value={this.state.given_name}
onChange={this.handleChange.bind(this,'given_name')}/>
<br />
<label htmlFor="family_name">Family Name:</label>
<br />
<input
type="text"
name="family_name"
value={this.state.family_name}
onChange={this.handleChange.bind(this,'family_name')}/>
<br />
<button type="submit">Speak</button>
</form>;
}
});
-- 使用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 <form onSubmit={this.submitHandler}>
<label htmlFor="given_name">Given Name:</label>
<br />
<input
type="text"
name="given_name"
value={this.state.given_name}
onChange={this.handleChange}/>
<br />
<label htmlFor="family_name">Family Name:</label>
<br />
<input
type="text"
name="family_name"
value={this.state.family_name}
onChange={this.handleChange}/>
<br />
<button type="submit">Speak</button>
</form>;
}
});
-- 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 <form onSubmit={this.submitHandler}>
<label htmlFor="given_name">Given Name:</label>
<br />
<input
type="text"
name="given_name"
valueLink={this.linkState('given_name')} />
<br />
<label htmlFor="family_name">Family Name:</label>
<br />
<input
type="text"
name="family_name"
valueLink={this.linkState('family_name')} />
<br />
<button type="submit">Speak</button>
</form>;
}
});
这种方法便于控制表单域，把其值保存在父组件中的state中。而且，其数据流仍然与其他约束的表单元素保持一致。
但是使用这种方式往数据流中添加定制功能时，复杂度会增加。建议只在特定的场景下使用。因为传统约束表单组件提供了同样的功能且更加灵活。
9. 自定义表单组件：
可以在项目中复用共有功能。也是一种将交互界面提升为一种更加复杂的表单组件（如单选框、多选框）的好方法。
eg：自定义表单单选框和valueLink结合使用：
<div className="col-sm-10">
<PaymentDistrictSelect valueLink={this.linkState('paymentDistrictCode')}/>
</div>
10. Focus：
控制表单组件的focus可以很好地引导用户按照表单逻辑逐步填写。可减少用户操作，增强可用性。
11. 可用性：
React组件常常缺乏可用性。如缺乏对键盘操作的支持。
12. 传达要求：
placeholder可以用来显示输入实例或作为没有输入时的默认值
<input type="text" name="keyword" placeholder="对账单号/预付单号" valueLink={this.linkState("keyword")} style={{width: '100%'}}/>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。