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

勾勾的前端世界 2021-09-15

380

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

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

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

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

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

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

受控组件（表单）

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

import React, { Component } from 'react'


export class Tables extends Component {


  state = {
    name:"xiling"
  }


  render() {
    return (
      <div>
        <input type="text"  value={this.state.name} >
      </div>
    )
  }
}


export default Tables

页面中呈现的表单及内容是完全没问题的，但是当我们在页面中尝试修改表单数据时，你会发现是无法修改的，而且还报错了。这和前面学习的 state 的修改条件是一致的，不能直接修改，需要通过 setState() 方法进行数据的修改，代码如下：

  changes = (ev)=>{
    this.setState({
      name:ev.target.value
    })
  }


  render() {
    return (
      <div>
        <input type="text"  value={this.state.name} onChange={this.changes} >
      </div>
    )
  }
}

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

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

import React, { Component } from 'react'


export class Tables extends Component {


  state = {
    name:"xiling",
    age:18
  }


  changes = (ev)=>{
    this.setState({
      name:ev.target.value
    })
  }


  ages = (ev)=>{
    this.setState({
      age:ev.target.value
    })
  }


  render() {
    return (
      <div>
        <input type="text"  value={this.state.name} onChange={this.changes} >
        <input type="text"  value={this.state.age} onChange={this.ages} >
      </div>
    )
  }
}


export default Tables

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

  render() {
    return (
      <div>
        <input type="text"  value={this.state.name} 
          onChange={(ev)=>{
            this.setState({name:ev.target.value})
          }} 
          >
        <input type="text"  value={this.state.age} 
          onChange={(ev)=>{
            this.setState({age:ev.target.value})
          }}
          >
      </div>
    )
  }

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

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

当然可以！

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

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

import React, { Component } from 'react'


export class Tables extends Component {


  state = {
    name:"xiling",
    age:18
  }


  tables = (ev)=>{
    const prop = ev.target.name
    this.setState({
      [prop]:ev.target.value
    })
  }


  render() {
    return (
      <div>
        <input type="text" name="name"  value={this.state.name} onChange={this.tables} >
        <input type="text" name="age" value={this.state.age} onChange={(ev)=>this.tables(ev)} >
      </div>
    )
  }
}


export default Tables

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

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

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

  render() {
    return (
      <div>
        {/* 第一种就是加一个 readOnly 属性,告诉 React 表单为只读的，不需要修改 */}
        <input type="text" value={this.state.name} readOnly onChange={(ev) => {
          this.setState({ name: ev.target.value })
        }} >
        {/* 需要注意，设置为只读后，即便添加修改事件，也不能修改 */}




        {/* 第二种就是使用 defaultValue 赋值 */}
        {/* 意思就是设置默认值 */}
        <input type="text" defaultValue={this.state.age} />
      </div>
    )
  }

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

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

推荐阅读：

React 数据流管理：组件之间数据是如何传递的？

避不开的 setState 问题

拆解高频面试题：你是如何理解单向数据流的？

恭喜你又在前端道路上进步了一点点。

点个“在看”和“赞”吧！

数据库

文章转载自勾勾的前端世界，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

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

受控组件（表单）

评论