ReactJS_14 表单的可控组件和不可控组件

可控组件和不可控组件：

在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。

可控组件：

在render()函数中设置了value的值是一个功能受限的组件，渲染出来的HTML元素始终保持value属性的值，即使用户输入也不会改变。

class MyForm extends React.Component{
        render(){
            return(
                <div>
                    <input type="text" value="React教程"}/>
                </div>
            )
        }
    }

这时候你在浏览器中打开的React教程这个值是不可变的，甚至连删除都删除不了，这是由React的渲染策略决定的。如果要写成功能正常和可用性组件，我们需要编写onChange事件，并将value绑定到state中。

 class MyForm extends React.Component{
        constructor(props){
            super(props);
            this.state={value:'React教程'}
        };
        handleChange(event){
            this.setState({
                value:event.target.value
            });
            console.log(this.state.value);
        }
        render(){
            return(
                <div>
                    <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)}/>
                </div>
            )
        }
    }
    ReactDOM.render(
        <MyForm />,
        document.getElementById('root')
    );

在情况允许的条件下，我们应该优先考虑编写可控组件。

可控组件的有点：

• 符合React单向数据流特性，即从state流向render输出的结果。
• 数据存储在state中，便于访问和处理。

不可控组件

在input标签中不把value绑定到state上的就是不可控组件，它的数据不与state对应，所以在开发时会给自己挖很多坑，但是不可控组件并不是不可掌控，下面我们了解一下不可控组件的小技巧。
我们先来做一个最简单的不可用组件。

class MyForm extends React.Component{
        render(){
            return(
                <div>
                    <input type="text"/>
                </div>
            )
        }
    }

组件完成之后给它加上一个onChange事件，发现是可以监控到变化值的。如果要获得iput中的value值，需先拿到其DOM节点，然后获取其value值。

  class MyForm extends React.Component{
        handleChange(){
            const inputValue=ReactDOM.findDOMNode(this.refs.React).value;
            console.log(inputValue);
        }

        render(){
            return(
                <div>
                    <input type="text" onChange={this.handleChange.bind(this)} ref="React"/>
                </div>
            )
        }
    };

上面的方法太过于繁琐，而且不可复用，所以我们还是采取给input加入默认值的方式，但是不是value了，而是defaultValue。

class MyForm extends React.Component{
        render(){
            return(
                <div>
                    <input type="text" defaultValue="默认值"/>
                </div>
            )
        }
    }