react学习笔记 item8 --- 表单

表单是应用必不可少的一部分，只要需要用户输入，哪怕是最简单的输入，都离不开表单。一直以来，单页应用中的表单都很难处理好，因为表单中充斥着用户变化莫恻的状态。在 react 中，表单的处理也与原生的 JS 处理方法稍有不同。在 react 中，表单组件有两种类型：受限组件（约束组件）和 不受限组件（无约束组件）。

受限组件

约束组件的模式与React 其他类型组件的模式一致。表单组件的状态交由React 组件控制，状态值被存储在React 组件的state 中。如果想要更好地控制表单组件，推荐使用约束组件。

先看下面一个例子

// 示例1
var MyForm = React.createClass({
    render:function(){
   
        return(
            <input type='text' value='defaultText' />
            );
    }
});

ReactDOM.render(
   <MyForm />,
  document.getElementById('example')
);

上面的代码将渲染出一个值为 defaultText 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 defaultText。通过运行，我们在 chrome 浏览器中查看到如下结果：

在控制台打印出了一条 warning， 提醒我们设置了 value 的时候需要同时提供 onChange 事件，不然表单是只读的。因此如果想响应更新用户输入的值，就得使用 onChange 事件：

// 示例2
var MyForm = React.createClass({
    getInitialState: function() {
   
        return {inputValue: 'defaultText'};
      },
    handleInputChange:function(e){
   
        this.setState({
            inputValue: e.target.value
        });
    },
    render:function(){
   
        return(
            <input type='text' value={
  this.state.inputValue} onChange={
  this.handleInputChange} />
            );
    }
});
ReactDOM.render(
   <MyForm />,
  document.getElementById('example')
);

示例 2 与示例 1 相比，最显著的变化就是<input/> 的值存储在父组件的 state 中，然后通过 onChange 事件去改变 state 。以下是示例2 的过程：

• getlnitialState 设置defaultValue 。
• < input/> 的值在渲染时被设置。
• < input/ > 的值onChange 时， change 处理器被调用。
• change 处理器更新state 。
• 在重新撞染时更新< input/> 的值。

虽然与无约束组件相比，代码量增加了不少，但是现在可以控制数据流，在用户输入数据时更新state 。

在示例2 的基础上，我们改变handleInputChange，实现当用户输入时，把字符都转换成大写：

handleInputChange:function(e){
        this.setState({
            inputValue: e.target.value.toUpperCase()
        });
    },

你可能会注意到，在用户输入数据后，小写字符转成大写形式并添加到输入框时，并不会发生闪烁。这是因为React 拦截了浏览器原生的change 事件，在setState 被调用后， 这个组件就会重新渲染输入框。然后React 计算差异，更新输入框的值。

不受限组件

没有设置 value(或者设为 null) 的 <input> 组件是一个不受限组件。对于不受限的 <input>组件，渲染出来的元素直接反应用户输入。不受限组件的最大的特点就是表单组件的值是不受React 组件控制的，而是由<i