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

上篇《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 (

)

}

export default Tables

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

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

表单的修改是由用户输入操作的，也就是用户输入到表单是什么值，相对应的 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 (

render() {
return (
onChange={(ev)=>{
this.setState({name:ev.target.value})
}}
/>
onChange={(ev)=>{
this.setState({age:ev.target.value})
}}
/>
)
}

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 (
this.tables(ev)} />
)
}
}
export default Tables

render() {
return (
{/* 第一种就是加一个 readOnly 属性,告诉 React 表单为只读的，不需要修改 */}
{
this.setState({ name: ev.target.value })
}} />
{/* 需要注意，设置为只读后，即便添加修改事件，也不能修改 */}
{/* 第二种就是使用 defaultValue 赋值 */}
{/* 意思就是设置默认值 */}
)
}