devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React之数据绑定以及表单处理_react 数据绑定

作者：小桥流水78 | 2024-07-06 05:29:29

赞

踩

react 数据绑定

一、表单元素

        像<input>、<textarea>、<option>这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易

        交互属性，用户对一下元素交互时通过onChange回调函数来监听组件变化。表单元素支持几个受用户交互影响的属性：

        value用于<input>、<textarea>

        checked用于<checkbox>、<radio>

        selected用于<option>

二、受限组件和不受限组件

1.受限组件与双向数据绑定

受限组件：设置了value的<input>是一个受限组件，对于受限的<input>，渲染出来HTML元素始终保持value属性的值，此时用户在渲染出来的组件里输入任何值都不起作用

 写一个完整的表单元素的实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>受限组件和双向绑定</title>
  8.     <script src="../js/react.development.js "></script>
  9.     <script src="../js/react-dom.development.js"></script>
  10.     <!-- 用于解析babel -->
  11.     <script src="../js/babel.min.js"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div id="hello">
  16.     </div>
  17.     <div id="hello2">
  18.     </div>
  19.     <script type="text/babel">
  20.         //受限组件,他的
  21.         class Hello extends React.Component{
  22.             
  23.             render(){
  24.                 return <div>
  25.                     <input type="text" value='123'/>
  26.                     <hr/>
  27.                 </div>
  28.                
  29.             }
  30.         }
  31.         ReactDOM.render(<Hello />,document.getElementById('hello'))
  32.         //双向数据绑定
  33.         class Hello2 extends React.Component{
  34.             state = {
  35.                 value:'12345'
  36.             }
  37.             //
  38.             valueChange = (e)=>{
  39.                 this.setState({value:e.target.value})
  40.             }
  41.             render(){
  42.                 return <div>
  43.                     <input type="text" value={this.state.value} onChange={this.valueChange}/>
  44.                     <p>{this.state.value}</p>
  45.                 </div>
  46.             }
  47.         }
  48.         ReactDOM.render(<Hello2 />,document.getElementById('hello2'))
  49.     </script>
  50.     <!-- radio、checkbox、textarea、select -->
  51.     <hr/>
  52.     <div id="root1"></div>
  53.     <script type="text/babel">
  54.         //表单元素的双向绑定
  55.         class Rtx extends React.Component{
  56.             state = {
  57.                 //单选按钮
  58.                 radioValue:'',
  59.                 //check选中的
  60.                 checkArr:[],
  61.                 //文本域的value
  62.                 textareaValue:'',
  63.                 selectArr: ['北京','上海','湖北','广东'],
  64.                 //select选中的地址
  65.                 address:''
  66.             }
  67.             //
  68.             radioChange = (e)=>{
  69.                 this.setState({radioValue:e.target.value})
  70.             }
  71.             checkboxChange =(e)=>{
  72.                 //由于组件继承的是purecomponent,因此要将数组复制一次
  73.                 let _checkArr = [...this.state.checkArr]
  74.                 if (e.target.checked) {
  75.                     //将所有选中的复选框的value值，push到一个数组（checkArr）中
  76.                     _checkArr.push(e.target.value)
  77.                 } else {
  78.                     //若取消选中，则将其从checkArr中减掉
  79.                     _checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)
  80.                 }
  81.                 //利用setState更新checkArr
  82.                 this.setState({
  83.                     checkArr:_checkArr
  84.                 })
  85.             }
  86.             textareaChange=(e)=>{
  87.                 this.setState({textareaValue:e.target.value})
  88.             }
  89.             selectChange=(e)=>{
  90.                 this.setState({address:e.target.value})
  91.             }
  92.             submit =()=>{
  93.                 console.log(this.state);
  94.             }
  95.             render(){
  96.                 let checkInfo=["c1",'c2']
  97.                 let {radioValue,checkArr,textareaValue,selectArr,address } =this.state
  98.                 let {checkboxChange} =this
  99.                 return <div>
  100.                    <div>
  101.                     性别：
  102.                      男<input type="radio" value='man' checked={radioValue=='man'?true:false}  onChange={this.radioChange}/>
  103.                      女<input type="radio" value='woman' checked={radioValue=='woman'?true:false} onChange={this.radioChange}/>
  104.                     </div>
  105.                     <div>
  106.                         {
  107.                             checkInfo.map(function(item,index){
  108.                                 return <span>
  109.                                     {item}
  110.                                     <input type="checkbox" name='box' value={item} key={index} 
  111.                                     onChange={checkboxChange} 
  112.                                     checked={checkArr.indexOf(item)!==-1}></input>
  113.                                     </span> 
  114.                             })
  115.                         }
  116.                     </div>
  117.                     <div>
  118.                         <textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea>
  119.                     </div>
  120.                     <div>
  121.                         地址:
  122.                         <select value={address} name="address" onChange={this.selectChange}>
  123.                         {
  124.                             selectArr.map(function(item,index){
  125.                             return <option key={index}>{item}</option>
  126.                             })
  127.                         }
  128.                         </select>   
  129.                     </div>
  130.                     <button disabled={!radioValue || !address || !checkArr ||  !textareaValue } onClick={()=>this.submit()}>提交</button>
  131.                 </div>
  132.             }
  133.         }
  134.         ReactDOM.render(<Rtx />,document.getElementById('root1'))
  135.     </script>
  136.     <!-- radio、
  137. </body>
  139. </html>

2.不受限组件

不受限组件： 没有设置value（或者设为null）的input组件是一个不受限组件。杜宇不受限的input组件，渲染出来的元素直接反映用户输入

 使用defaultValue属性不使用value可以实现不受限组件的双向数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>非受限组件</title>
  8.     <script src="../js/react.development.js "></script>
  9.     <script src="../js/react-dom.development.js"></script>
  10.     <!-- 用于解析babel -->
  11.     <script src="../js/babel.min.js"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div id="root1"></div>
  16.     <script type="text/babel">
  17.         //非受限组件
  18.         class Rtx extends React.Component {
  19.             state = {
  20.                 value: '123'
  21.             }
  22.             valueChange = (e) => {
  23.                 this.setState({ value: e.target.value })
  24.                 console.log(this.state.value);
  25.             }
  26.             render() {
  27.  
  28.                 return <div>
  29.                     <div>
  30.                         <input type="text" />
  31.                         <input type="text" defaultValue={this.state.value} onChange={this.valueChange} />
  32.                         <p>{this.state.value}</p>
  33.                     </div>
  34.                     <div>
  35.                         性别：
  36.                         男<input type="radio" name='sex' value='man' />
  37.                         女<input type="radio" name='sex' value='woman' />
  38.                     </div>
  39.                 </div>
  40.             }
  41.         }
  42.         ReactDOM.render(<Rtx />, document.getElementById('root1'))
  43.     </script>
  44.     <!-- radio、checkbox、textarea、select -->
  45.     <div id="root1"></div>
  46.     <script type="text/babel">
  47.         //表单元素的双向绑定
  48.         class Rtx extends React.Component {
  49.             state = {
  50.                 //单选按钮
  51.                 radioValue: '',
  52.                 //check选中的
  53.                 checkArr: [],
  54.                 //文本域的value
  55.                 textareaValue: '',
  56.                 selectArr: ['北京', '上海', '湖北', '广东'],
  57.                 //select选中的地址
  58.                 address: ''
  59.             }
  60.             //
  61.             radioChange = (e) => {
  62.                 this.setState({ radioValue: e.target.value })
  63.             }
  64.             checkboxChange = (e) => {
  65.                 //由于组件继承的是purecomponent,因此要将数组复制一次
  66.                 let _checkArr = [...this.state.checkArr]
  67.                 if (e.target.checked) {
  68.                     //将所有选中的复选框的value值，push到一个数组（checkArr）中
  69.                     _checkArr.push(e.target.value)
  70.                 } else {
  71.                     //若取消选中，则将其从checkArr中减掉
  72.                     _checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)
  73.                 }
  74.                 //利用setState更新checkArr
  75.                 this.setState({
  76.                     checkArr: _checkArr
  77.                 })
  78.             }
  79.             textareaChange = (e) => {
  80.                 this.setState({ textareaValue: e.target.value })
  81.             }
  82.             selectChange = (e) => {
  83.                 this.setState({ address: e.target.value })
  84.             }
  85.             submit = () => {
  86.                 console.log(this.state);
  87.             }
  88.             render() {
  89.                 let checkInfo = ["c1", 'c2']
  90.                 let { radioValue, checkArr, textareaValue, selectArr, address } = this.state
  91.                 let { checkboxChange } = this
  92.                 return <div>
  93.                     <div>
  94.                         性别：
  95.                         男<input type="radio" defaultValue='man'  checked={radioValue == 'man' ? true : false} onChange={this.radioChange} />
  96.                         女<input type="radio" defaultValue='woman' checked={radioValue == 'woman' ? true : false} onChange={this.radioChange} />
  97.                     </div>
  98.                     <div>
  99.                         {
  100.                             checkInfo.map(function (item, index) {
  101.                                 return <span>
  102.                                     {item}
  103.                                     <input type="checkbox" name='box' defaultValue={item} key={index}
  104.                                         onChange={checkboxChange}
  105.                                         checked={checkArr.indexOf(item) !== -1}></input>
  106.                                 </span>
  107.                             })
  108.                         }
  109.                     </div>
  110.                     <div>
  111.                         <textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea>
  112.                     </div>
  113.                     <div>
  114.                         地址:
  115.                         <select defaultValue={address} name="address" onChange={this.selectChange}>
  116.                             {
  117.                                 selectArr.map(function (item, index) {
  118.                                     return <option key={index}>{item}</option>
  119.                                 })
  120.                             }
  121.                         </select>
  122.                     </div>
  123.                     <button disabled={!radioValue || !address || !checkArr || !textareaValue} onClick={() => this.submit()}>提交</button>
  124.                 </div>
  125.             }
  126.         }
  127.         ReactDOM.render(<Rtx />, document.getElementById('root1'))
  128.     </script>
  129. </body>
  130.  
  131. </html>

三、常用表单数据绑定

对相同逻辑的表单change事件进行封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单提交</title>
  8.     <script src="../js/react.development.js "></script>
  9.     <script src="../js/react-dom.development.js"></script>
  10.     <!-- 用于解析babel -->
  11.     <script src="../js/babel.min.js"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div id="root1"></div>
  16.     <script type="text/babel">
  17.         //非受限组件
  18.         class Rtx extends React.Component {
  19.             state = {
  20.                 name: 'fxt',
  21.                 sex:'1',
  22.                 address:'上海',
  23.                 textareaValue:'hello world'
  24.             }
  25.             //我们发现下面获得改变值的方法都是一样的，所以对一样的逻辑函数进行封装
  26.             handleChange=(e)=>{
  27.                 console.log(e.target.name);
  28.                 let key = e.target.name
  29.                 this.setState({[key]:e.target.value})
  30.                 // this.setState({[e.target.name]:e.target.value})
  31.             }
  32.             // getName=(e)=>{
  33.             //     this.setState({name:e.target.value})
  34.             // }
  35.             // getSex=(e)=>{
  36.             //     this.setState({sex:e.target.value})
  37.             // }
  38.             getAddress=(e)=>{
  39.                 this.setState({address:e.target.value})
  40.             }
  41.             getTextareaValue=(e)=>{
  42.                 this.setState({textareaValue:e.target.value})
  43.             }
  44.             submit = (e) => {
  45.                 // e.preventDefault();
  46.                 alert(JSON.stringify(this.state))
  47.             }
  48.             render() {
  49.                 let  selectArr=['北京', '上海', '湖北', '广东']
  50.                 let {name,sex,address,textareaValue}=this.state
  51.                 return <div>
  52.                     <form action="">
  53.                         <label for="">姓名：<input type="text" name='name' defaultValue={name} onChange={this.handleChange}/></label>  
  54.                         <label for="">
  55.                             <div>
  56.                                 性别：
  57.                                 <input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男
  58.                                 <input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女
  59.                             </div>
  60.                         </label>  
  61.                         <label for="">
  62.                             <div>
  63.                                 地址:
  64.                                 <select defaultValue={address} name="address" onChange={this.getAddress}>
  65.                                     {
  66.                                         selectArr.map( (item, index) =>{
  67.                                             return <option key={index}>{item}</option>
  68.                                         })
  69.                                     }
  70.                                 </select>
  71.                             </div>
  72.                         </label>
  73.                         <label for="">
  74.                             <div>
  75.                                 备注：
  76.                                 <textarea name="" id="" defaultValue={textareaValue} cols="30" rows="10" onChange={this.getTextareaValue}></textarea>   
  77.                             </div>
  78.                         </label>
  79.                         <button disabled={!name || !address || !textareaValue || !sex} onClick={()=>{this.submit()} }>提交</button>
  80.                     </form>
  81.                 </div>
  82.             }
  83.         }
  84.         ReactDOM.render(<Rtx />, document.getElementById('root1'))
  85.     </script>
  86. </body>
  87.  
  88. </html>

四、注册功能实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册表单验证</title>
  8.     <script src="../js/react.development.js "></script>
  9.     <script src="../js/react-dom.development.js"></script>
  10.     <!-- 用于解析babel -->
  11.     <script src="../js/babel.min.js"></script>
  12.     <style>
  13.         .error{
  14.             color: red;
  15.         }
  16.     </style>
  17. </head>
  18.  
  19. <body>
  20.     <div id="root1"></div>
  21.     <script type="text/babel">
  22.         //非受限组件
  23.         class Rtx extends React.Component {
  24.             state = {
  25.                 name: '',
  26.                 nameError:"",
  27.                 passworld:'',
  28.                 passworldError:'',
  29.                 sex:'1',
  30.                 phone:'',
  31.                 phoneError:'',
  32.                 city:'北京',
  33.                 textareaValue:'hello world'
  34.             }
  35.             //单独写校验规则的
  36.             nameChange=(e)=>{
  37.                 let rule= /^[\w-]{4,10}$/ 
  38.                 let value=e.target.value
  39.                 let error=''
  40.                 if(!value){
  41.                     error='请输入昵称'
  42.                 }else if(!rule.test(value)){
  43.                     error='请输入4-10位的昵称'
  44.                 }else{
  45.                     error=''
  46.                 }
  47.                 this.setState({
  48.                     name:value,
  49.                     nameError:error
  50.                 })
  51.             }
  52.             //进行校验的表单元素统一封装
  53.             handleTest=(e)=>{
  54.                 let ruleArr={
  55.                     passworld:{
  56.                         rule:new RegExp(/^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/),
  57.                         text:'密码',
  58.                         error:'6-12位，至少包括一个大小写字母、数字、特殊字符'
  59.                     },
  60.                     phone:{
  61.                         rule:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/),
  62.                         text:'手机号',
  63.                         error:'请输入正确的手机号'
  64.                     }
  65.                 }
  66.                 let value=e.target.value
  67.                 let key = e.target.name
  68.                 let ruleInfo={}
  69.                 let error=''
  70.                 Object.keys(ruleArr).map((el)=>{
  71.                     if(el==key){
  72.                         ruleInfo=ruleArr[key]
  73.                     }
  74.                 })
  75.                 if(!value){
  76.                     error='请输入'+ruleInfo.text
  77.                 }else if(!ruleInfo.rule.test(value)){
  78.                     error=ruleInfo.error
  79.                 }else{
  80.                     error=''
  81.                 }
  82.                 this.setState({
  83.                     [key]:value,
  84.                     [key+'Error']:error
  85.                 })
  86.             }
  87.             //不进行校验的表单通过自定义属性实现获得要设置的值的key键
  88.             handleChange=(e)=>{
  89.                 console.log(e.target.name);
  90.                 let key = e.target.name
  91.                 this.setState({[key]:e.target.value})
  92.                 // this.setState({[e.target.name]:e.target.value})
  93.             }
  94.             //提交想提交值
  95.             submit = (e) => {
  96.                 e.preventDefault()//阻止默事件
  97.                 let {name,passworld,sex,phone,city,textareaValue} =this.state
  98.                 let data={
  99.                     name,passworld,sex,phone,city,textareaValue
  100.                 }
  101.                 alert(JSON.stringify(data))
  102.             }
  103.             render() {
  104.                 let  selectArr=[{id:1,text:'北京'},{id:2,text: '上海'}, {id:3,text:'湖北'}]
  105.                 let {name,nameError,passworld,passworldError,sex,phone,phoneError,city,textareaValue}=this.state
  106.                 return <div>
  107.                     <form action="">
  108.                         <label for="">
  109.                             昵称：<input type="text" name='name' defaultValue={name} onChange={this.nameChange}/>
  110.                             <span className='error'> * {nameError}</span>
  111.                         </label>  
  112.                         <label for="">
  113.                             <div>
  114.                                 密码：
  115.                                 <input type="text" name='passworld' defaultValue={passworld} onChange={this.handleTest}/>
  116.                                 <span className='error'> * {passworldError}</span>
  117.                             </div>
  118.                         </label>  
  119.                         <label for="">
  120.                             <div>
  121.                                 性别：
  122.                                 <input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男
  123.                                 <input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女
  124.                             </div>
  125.                         </label> 
  126.                         <label for="">
  127.                             手机号：<input type="text" name='phone' defaultValue={phone} onChange={this.handleTest}/>
  128.                             <span className='error'> * {phoneError}</span>    
  129.                         </label>  
  130.                         <label for="">
  131.                             <div>
  132.                                 城市:
  133.                                 <select defaultValue={city} name="city" onChange={this.handleChange}>
  134.                                     {
  135.                                         selectArr.map( (item, index) =>{
  136.                                             return <option value={item.id} key={index}>{item.text}</option>
  137.                                         })
  138.                                     }
  139.                                 </select>
  140.                             </div>
  141.                         </label>
  142.                         <label for="">
  143.                             <div>
  144.                                 备注：
  145.                                 <textarea name="textareaValue" id="" defaultValue={textareaValue}  cols="30" rows="10" onChange={this.handleChange}></textarea>   
  146.                             </div>
  147.                         </label>
  148.                         <button disabled={!name || nameError|| !passworld || passworldError|| !sex || !phone ||phoneError || !city ||!textareaValue } onClick={this.submit }>提交</button>
  149.                     </form>
  150.                 </div>
  151.             }
  152.         }
  153.         ReactDOM.render(<Rtx />, document.getElementById('root1'))
  154.     </script>
  155. </body>
  156.  
  157. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/791955
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号