电子商务网站建设可用性,泸州网站seo,免费涨热度软件,wordpress 宽版一、表单元素 像input、textarea、option这样的表单元素不同于其他元素#xff0c;因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易 交互属性#xff0c;用户对一下元素交互时通过onChange回调函数来监听…一、表单元素 像input、textarea、option这样的表单元素不同于其他元素因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易 交互属性用户对一下元素交互时通过onChange回调函数来监听组件变化。表单元素支持几个受用户交互影响的属性 value用于input、textarea checked用于checkbox、radio selected用于option 二、受限组件和不受限组件
1.受限组件与双向数据绑定 受限组件设置了value的input是一个受限组件对于受限的input渲染出来HTML元素始终保持value属性的值此时用户在渲染出来的组件里输入任何值都不起作用 写一个完整的表单元素的实例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title受限组件和双向绑定/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idhello/divdiv idhello2/divscript typetext/babel//受限组件,他的class Hello extends React.Component{render(){return divinput typetext value123/hr//div}}ReactDOM.render(Hello /,document.getElementById(hello))//双向数据绑定class Hello2 extends React.Component{state {value:12345}//valueChange (e){this.setState({value:e.target.value})}render(){return divinput typetext value{this.state.value} onChange{this.valueChange}/p{this.state.value}/p/div}}ReactDOM.render(Hello2 /,document.getElementById(hello2))/script!-- radio、checkbox、textarea、select --hr/div idroot1/divscript typetext/babel//表单元素的双向绑定class Rtx extends React.Component{state {//单选按钮radioValue:,//check选中的checkArr:[],//文本域的valuetextareaValue:,selectArr: [北京,上海,湖北,广东],//select选中的地址address:}//radioChange (e){this.setState({radioValue:e.target.value})}checkboxChange (e){//由于组件继承的是purecomponent,因此要将数组复制一次let _checkArr [...this.state.checkArr]if (e.target.checked) {//将所有选中的复选框的value值push到一个数组checkArr中_checkArr.push(e.target.value)} else {//若取消选中则将其从checkArr中减掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr:_checkArr})}textareaChange(e){this.setState({textareaValue:e.target.value})}selectChange(e){this.setState({address:e.target.value})}submit (){console.log(this.state);}render(){let checkInfo[c1,c2]let {radioValue,checkArr,textareaValue,selectArr,address } this.statelet {checkboxChange} thisreturn divdiv性别男input typeradio valueman checked{radioValueman?true:false} onChange{this.radioChange}/女input typeradio valuewoman checked{radioValuewoman?true:false} onChange{this.radioChange}//divdiv{checkInfo.map(function(item,index){return span{item}input typecheckbox namebox value{item} key{index} onChange{checkboxChange} checked{checkArr.indexOf(item)!-1}/input/span })}/divdivtextarea name id value{textareaValue} cols30 rows10 onChange{this.textareaChange}/textarea/divdiv地址:select value{address} nameaddress onChange{this.selectChange}{selectArr.map(function(item,index){return option key{index}{item}/option})}/select /divbutton disabled{!radioValue || !address || !checkArr || !textareaValue } onClick{()this.submit()}提交/button/div}}ReactDOM.render(Rtx /,document.getElementById(root1))/script!-- radio、
/body/html
2.不受限组件 不受限组件 没有设置value或者设为null的input组件是一个不受限组件。杜宇不受限的input组件渲染出来的元素直接反映用户输入 使用defaultValue属性不使用value可以实现不受限组件的双向数据 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title非受限组件/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idroot1/divscript typetext/babel//非受限组件class Rtx extends React.Component {state {value: 123}valueChange (e) {this.setState({ value: e.target.value })console.log(this.state.value);}render() {return divdivinput typetext /input typetext defaultValue{this.state.value} onChange{this.valueChange} /p{this.state.value}/p/divdiv性别男input typeradio namesex valueman /女input typeradio namesex valuewoman //div/div}}ReactDOM.render(Rtx /, document.getElementById(root1))/script!-- radio、checkbox、textarea、select --div idroot1/divscript typetext/babel//表单元素的双向绑定class Rtx extends React.Component {state {//单选按钮radioValue: ,//check选中的checkArr: [],//文本域的valuetextareaValue: ,selectArr: [北京, 上海, 湖北, 广东],//select选中的地址address: }//radioChange (e) {this.setState({ radioValue: e.target.value })}checkboxChange (e) {//由于组件继承的是purecomponent,因此要将数组复制一次let _checkArr [...this.state.checkArr]if (e.target.checked) {//将所有选中的复选框的value值push到一个数组checkArr中_checkArr.push(e.target.value)} else {//若取消选中则将其从checkArr中减掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr: _checkArr})}textareaChange (e) {this.setState({ textareaValue: e.target.value })}selectChange (e) {this.setState({ address: e.target.value })}submit () {console.log(this.state);}render() {let checkInfo [c1, c2]let { radioValue, checkArr, textareaValue, selectArr, address } this.statelet { checkboxChange } thisreturn divdiv性别男input typeradio defaultValueman checked{radioValue man ? true : false} onChange{this.radioChange} /女input typeradio defaultValuewoman checked{radioValue woman ? true : false} onChange{this.radioChange} //divdiv{checkInfo.map(function (item, index) {return span{item}input typecheckbox namebox defaultValue{item} key{index}onChange{checkboxChange}checked{checkArr.indexOf(item) ! -1}/input/span})}/divdivtextarea name id value{textareaValue} cols30 rows10 onChange{this.textareaChange}/textarea/divdiv地址:select defaultValue{address} nameaddress onChange{this.selectChange}{selectArr.map(function (item, index) {return option key{index}{item}/option})}/select/divbutton disabled{!radioValue || !address || !checkArr || !textareaValue} onClick{() this.submit()}提交/button/div}}ReactDOM.render(Rtx /, document.getElementById(root1))/script
/body/html
三、常用表单数据绑定
对相同逻辑的表单change事件进行封装 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单提交/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idroot1/divscript typetext/babel//非受限组件class Rtx extends React.Component {state {name: fxt,sex:1,address:上海,textareaValue:hello world}//我们发现下面获得改变值的方法都是一样的所以对一样的逻辑函数进行封装handleChange(e){console.log(e.target.name);let key e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}// getName(e){// this.setState({name:e.target.value})// }// getSex(e){// this.setState({sex:e.target.value})// }getAddress(e){this.setState({address:e.target.value})}getTextareaValue(e){this.setState({textareaValue:e.target.value})}submit (e) {// e.preventDefault();alert(JSON.stringify(this.state))}render() {let selectArr[北京, 上海, 湖北, 广东]let {name,sex,address,textareaValue}this.statereturn divform actionlabel for姓名input typetext namename defaultValue{name} onChange{this.handleChange}//label label fordiv性别input typeradio namesex value1 defaultChecked{sex1? true:false} id onChange{this.handleChange}/男input typeradio namesex value2 defaultChecked{sex2? true:false} id onChange{this.handleChange}/女/div/label label fordiv地址:select defaultValue{address} nameaddress onChange{this.getAddress}{selectArr.map( (item, index) {return option key{index}{item}/option})}/select/div/labellabel fordiv备注textarea name id defaultValue{textareaValue} cols30 rows10 onChange{this.getTextareaValue}/textarea /div/labelbutton disabled{!name || !address || !textareaValue || !sex} onClick{(){this.submit()} }提交/button/form/div}}ReactDOM.render(Rtx /, document.getElementById(root1))/script
/body/html
四、注册功能实现 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title注册表单验证/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/scriptstyle.error{color: red;}/style
/headbodydiv idroot1/divscript typetext/babel//非受限组件class Rtx extends React.Component {state {name: ,nameError:,passworld:,passworldError:,sex:1,phone:,phoneError:,city:北京,textareaValue:hello world}//单独写校验规则的nameChange(e){let rule /^[\w-]{4,10}$/ let valuee.target.valuelet errorif(!value){error请输入昵称}else if(!rule.test(value)){error请输入4-10位的昵称}else{error}this.setState({name:value,nameError:error})}//进行校验的表单元素统一封装handleTest(e){let ruleArr{passworld:{rule:new RegExp(/^\S*(?\S{6,12})(?\S*\d)(?\S*[A-Z])(?\S*[a-z])(?\S*[!#$%^*? ])\S*$/),text:密码,error:6-12位至少包括一个大小写字母、数字、特殊字符},phone:{rule:new RegExp(/^(?:(?:\|00)86)?1[3-9]\d{9}$/),text:手机号,error:请输入正确的手机号}}let valuee.target.valuelet key e.target.namelet ruleInfo{}let errorObject.keys(ruleArr).map((el){if(elkey){ruleInforuleArr[key]}})if(!value){error请输入ruleInfo.text}else if(!ruleInfo.rule.test(value)){errorruleInfo.error}else{error}this.setState({[key]:value,[keyError]:error})}//不进行校验的表单通过自定义属性实现获得要设置的值的key键handleChange(e){console.log(e.target.name);let key e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}//提交想提交值submit (e) {e.preventDefault()//阻止默事件let {name,passworld,sex,phone,city,textareaValue} this.statelet data{name,passworld,sex,phone,city,textareaValue}alert(JSON.stringify(data))}render() {let selectArr[{id:1,text:北京},{id:2,text: 上海}, {id:3,text:湖北}]let {name,nameError,passworld,passworldError,sex,phone,phoneError,city,textareaValue}this.statereturn divform actionlabel for昵称input typetext namename defaultValue{name} onChange{this.nameChange}/span classNameerror * {nameError}/span/label label fordiv密码input typetext namepassworld defaultValue{passworld} onChange{this.handleTest}/span classNameerror * {passworldError}/span/div/label label fordiv性别input typeradio namesex value1 defaultChecked{sex1? true:false} id onChange{this.handleChange}/男input typeradio namesex value2 defaultChecked{sex2? true:false} id onChange{this.handleChange}/女/div/label label for手机号input typetext namephone defaultValue{phone} onChange{this.handleTest}/span classNameerror * {phoneError}/span /label label fordiv城市:select defaultValue{city} namecity onChange{this.handleChange}{selectArr.map( (item, index) {return option value{item.id} key{index}{item.text}/option})}/select/div/labellabel fordiv备注textarea nametextareaValue id defaultValue{textareaValue} cols30 rows10 onChange{this.handleChange}/textarea /div/labelbutton disabled{!name || nameError|| !passworld || passworldError|| !sex || !phone ||phoneError || !city ||!textareaValue } onClick{this.submit }提交/button/form/div}}ReactDOM.render(Rtx /, document.getElementById(root1))/script
/body/html
