文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React 中 JSX 与用户表单数据的交互

2024-12-02 21:57

关注

上篇《React 数据流管理:组件之间数据是如何传递的?》,我们利用 Props 完成了对 React 数据流管理的所有内容的学习。而之前提到的关于 JSX 交互部分,用户的页面操作,都是由表单承接的,那么接下来的表单的处理就是重点了。

React 中表单的处理,实际是用户与应用之间的交互逻辑,而应用与用户之间的交互都是表单来承接的,所以我们实际学习的内容就是 JSX 与用户表单数据的交互。在 React 中,表单又分为了受控表单和非受控表单两中类别。

受控表单:表单元素的值全部出 React 来进行管理,此时表单元素中的值都放在 state 中,所以表单元素里的值需要从 state 中进行获取。

非受控表单:不受 React 管理控制,表单元素的数据由 DOM 元素本身进行管理,表单元素的值也是存放在 DOM 元素里的,获取的时候需要操作 DOM 元素。

React 的基本逻辑是数据决定 UI 的,所以 React 必然要控制数据,而非受控表单显然不符合这个基本逻辑,实际开发中也很少遇到,重点还是受控表单。

接下来,我们通过具体的代码来进行学习研究。

受控组件(表单)

我们使用普通的表单,在表单中展示 state 中的数据:

  1. import React, { Component } from 'react' 
  2.  
  3. export class Tables extends Component { 
  4.  
  5.   state = { 
  6.     name:"xiling" 
  7.   } 
  8.  
  9.   render() { 
  10.     return ( 
  11.       
     
  12.         "text"  value={this.state.name} /> 
  13.       
 
  •     ) 
  •   } 
  •  
  • export default Tables 
  • 页面中呈现的表单及内容是完全没问题的,但是当我们在页面中尝试修改表单数据时,你会发现是无法修改的,而且还报错了。这和前面学习的 state 的修改条件是一致的,不能直接修改,需要通过 setState() 方法进行数据的修改,代码如下:

    1. changes = (ev)=>{ 
    2.     this.setState({ 
    3.       name:ev.target.value 
    4.     }) 
    5.   } 
    6.  
    7.   render() { 
    8.     return ( 
    9.       
       
    10.         "text"  value={this.state.name} onChange={this.changes} /> 
    11.       
     
  •     ) 
  •   } 
  • 表单的修改是由用户输入操作的,也就是用户输入到表单是什么值,相对应的 state 就改成什么值。而这个操作,就需要获取到表单中用户的输入,同时我们也需要知道用户是何时触发修改动作的,所以,我们需要给表单绑定一个修改值这个动作的触发事件 onChange,在事件触发后,事件处理函数接收 事件对象(ev)从而获取用户的修改内容,然后再通过 setState() 修改数据。

    这个逻辑并没有什么问题,但是,如果我们有两个表单,就需要对应的两个事件处理函数,如果有3个表单,4个表单,10个表单……

    1. import React, { Component } from 'react' 
    2.  
    3. export class Tables extends Component { 
    4.  
    5.   state = { 
    6.     name:"xiling"
    7.     age:18 
    8.   } 
    9.  
    10.   changes = (ev)=>{ 
    11.     this.setState({ 
    12.       name:ev.target.value 
    13.     }) 
    14.   } 
    15.  
    16.   ages = (ev)=>{ 
    17.     this.setState({ 
    18.       age:ev.target.value 
    19.     }) 
    20.   } 
    21.  
    22.   render() { 
    23.     return ( 
    24.       
       
    25.         "text"  value={this.state.name} onChange={this.changes} /> 
    26.         "text"  value={this.state.age} onChange={this.ages} /> 
    27.        
    28.     ) 
    29.   } 
    30.  
    31. export default Tables 

    这样的写法肯定不对,最直观的修改办法就是将单独的事件处理函数删除,直接把事件的函数处理写到事件绑定上,比如这样:

    1. render() { 
    2.     return ( 
    3.       
       
    4.         "text"  value={this.state.name}  
    5.           onChange={(ev)=>{ 
    6.             this.setState({name:ev.target.value}) 
    7.           }}  
    8.           /> 
    9.         "text"  value={this.state.age}  
    10.           onChange={(ev)=>{ 
    11.             this.setState({age:ev.target.value}) 
    12.           }} 
    13.           /> 
    14.        
    15.     ) 
    16.   } 

    但是,即便这样,依然存在需要为每个表单单独写修改逻辑的问题,表单一旦多了之后,也是一个非常棘手的问题。

    能不能对表单的修改进行统一的管理呢?

    当然可以!

    我们利用表单属性就可以实现。做法也很简单,我们给每一个表单添加一个 name 属性,属性值与 state 中的属性值保持一致,这样在事件处理函数中就可以获取表单的属性值了。

    因为与 state 是保持一致的,所以,我们就可以直接把表单属性当作要修改的 state 属性值使用了,代码如下:

    1. import React, { Component } from 'react' 
    2.  
    3. export class Tables extends Component { 
    4.  
    5.   state = { 
    6.     name:"xiling"
    7.     age:18 
    8.   } 
    9.  
    10.   tables = (ev)=>{ 
    11.     const prop = ev.target.name 
    12.     this.setState({ 
    13.       [prop]:ev.target.value 
    14.     }) 
    15.   } 
    16.  
    17.   render() { 
    18.     return ( 
    19.       
       
    20.         "text" name="name"  value={this.state.name} onChange={this.tables} /> 
    21.         "text" name="age" value={this.state.age} onChange={(ev)=>this.tables(ev)} /> 
    22.        
    23.     ) 
    24.   } 
    25.  
    26. export default Tables 

    最后,我们再来解决报错问题,报错的原因在控制台中已经很明确了:受控表单需要对应的事件处理来控制数据的变化,如果没有那就会出现报错。

    但是,如果我只想将数据在表单中展示,并不想进行控制修改的情况下,依然出现这样的错误,就非常不友好了,那应该怎么做呢?

    有两种解决办法,都很简单,我们来看一下:

    1. render() { 
    2.     return ( 
    3.       
       
    4.         {} 
    5.         "text" value={this.state.name} readOnly onChange={(ev) => { 
    6.           this.setState({ name: ev.target.value }) 
    7.         }} /> 
    8.         {} 
    9.  
    10.  
    11.         {} 
    12.         {} 
    13.         "text" defaultValue={this.state.age} /> 
    14.        
    15.     ) 
    16.   } 

    下篇,我会展示常用的受控表单示例和非受控表单的原始及规范化写法。

     

    再写个 React 语法入门案例,我就非常像话地结束这一系列,阿里嘎多!

     

    来源: 勾勾的前端世界内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯