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

时间:2022-09-21 08:44:01

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

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

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

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

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

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

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

受控组件(表单)

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

  1. importReact,{Component}from'react'
  2.  
  3. exportclassTablesextendsComponent{
  4.  
  5. state={
  6. name:"xiling"
  7. }
  8.  
  9. render(){
  10. return(
  11.  
  12. "text"=value={this.state.name}/>
  13.  
  14. )
  15. }
  16. }
  17.  
  18. exportdefaultTables

页面中呈现的表单及内容是完全没问题的,但是当我们在页面中尝试修改表单数据时,你会发现是无法修改的,而且还报错了。这和前面学习的 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.  
  12. )
  13. }
  14. }

表单的修改是由用户输入操作的,也就是用户输入到表单是什么值,相对应的 state 就改成什么值。而这个操作,就需要获取到表单中用户的输入,同时我们也需要知道用户是何时触发修改动作的,所以,我们需要给表单绑定一个修改值这个动作的触发事件 onChange,在事件触发后,事件处理函数接收 事件对象(ev)从而获取用户的修改内容,然后再通过 setState() 修改数据。

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

  1. importReact,{Component}from'react'
  2.  
  3. exportclassTablesextendsComponent{
  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.  
  32. exportdefaultTables

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

  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. importReact,{Component}from'react'
  2.  
  3. exportclassTablesextendsComponent{
  4.  
  5. state={
  6. name:"xiling",
  7. age:18
  8. }
  9.  
  10. tables=(ev)=>{
  11. constprop=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.  
  27. exportdefaultTables

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

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

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

  1. render(){
  2. return(
  3.  
  4. {/*第一种就是加一个readOnly属性,告诉React表单为只读的,不需要修改*/}
  5. "text"=value={this.state.name}readOnlyonChange={(ev)=>{
  6. this.setState({name:ev.target.value})
  7. }}/>
  8. {/*需要注意,设置为只读后,即便添加修改事件,也不能修改*/}
  9.  
  10.  
  11. {/*第二种就是使用defaultValue赋值*/}
  12. {/*意思就是设置默认值*/}
  13. "text"=defaultValue={this.state.age}/>
  14.  
  15. )
  16. }

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

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

原文链接:https://mp.weixin.qq.com/s/jjosCESZlj3owxRSQnmFQQ