React表单

前端之家收集整理的这篇文章主要介绍了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%'}}/>
原文链接:https://www.f2er.com/react/302240.html

猜你在找的React相关文章