React表单处理

在React中关于表单分为两部分内容，受控组件和非受控组件。

4.7.1 受控组件

我们知道，在HTML中的表单元素是可以输入数据的（也可以进行删除），也就是有自己的可变状态。例如文本框，可以在文本框中输入内容，也可以进行删除，而输入的内容我们可以称之为可变的状态。而这个状态是有HTML表单元素自己维护的。

但是在React中，我们知道可变的状态通常保存在state中，并且只能通过setState方法来进行修改。

这时与HTML中的表单元素在状态的维护上产生了冲突。为了解决这个冲突，React将state与表单元素的值value绑定到一起，由state的值来控制表单元素的值。

所以我们将其值受到React控制的表单元素称之为受控组件。

import React,{Component}from 'react'
class App extends Component{
    state={
        num:10
    }
    handleChange=e=>{
        this.setState({
            num:e.target.value
        })
    }
    render(){
        return (
            <div>
                {this.state.num}
                <input type="text" value={this.state.num} onChange={this.handleChange}/>
            </div>
        )
    }
}
export default App

在这里，将React中state状态与文本框中的value属性进行了绑定，然后给文本框添加了一个onChange,当在文本框中输入值的时候，会调用handleChange方法，在这个方法中通过e.target.value获取文本框中输入的值，然后重新给了state，这时在div中展示的state中的num也发生了相应的变化。

下面再看几个受控组件的案例：

富文本框案例

富文本框的实现和文本框的实现基本上是一样的，代码如下所示：

import React,{Component}from 'react'
class App extends Component{
    state={
        content:'Hello'
    }
    handleChange=e=>{
        this.setState({
            content:e.target.value
        })
    }
    render(){
        return (
            <div>
                {this.state.content}        
                <textarea  value={this.state.content}  onChange={this.handleChange}></textarea>