react中 受控组件和 非受控组件 浅析

受控组件，非受控组件 都是针对于 input，select，textarea 等表单元素的。
一 受控组件
顾名思义，受控 - 能够被控制，简而言之也就是 ，组件的value 通过外部state控制，并通过onChange改变外部state。

二 非受控组件
组件的value值不受外部的state决定，一般采用ref 值获取 和改变组件的value。

三 举列

class Input extends React.Component<any, any> {
    constructor(props:any) {
        super(props);
        state = {
          value:''
        };
        this.input = React.createRef();
    }
    onChange(event: { target: { value: any; }; }){
        this.setState({
            value:event.target.value
        })
    }
    add(){
        const value = this.state.value + this.input.current.value；
        this.props.getValue(value);
        //添加值之后清空
        this.setState({
            value:''
        })；
        this.input.current.value = '';
    }
    render(){
        return (
            <div>
                 <input type="text" value={this.state.value} onChange={this.onChange.bind(this)}/>  // 此时为 受控组件
                 <input type="text" ref={this.input} />  // 此时为 非受控组件
                <button onClick={this.add.bind(this)}>添加</button>
            </div>
        )
    }
}