React表单

表单组件两种类型：约束组件和无约束组件

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后加上multi={true}属性

当使用多选的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两个属性。

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。

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.可用性：

React组件常常缺乏可用性。如缺乏对键盘操作的支持。

12.传达要求：

placeholder可以用来显示输入实例或作为没有输入时的默认值

<inputtype="text"name="keyword"placeholder="对账单号/预付单号"valueLink={this.linkState("keyword")}style={{width:'100%'}}/>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!