受控组件与非受控组件 --- react

在react中使用input时，随着用户的输入，对value进行了更改，其后分为两种情况：

一 非受控组件

input中的value值并没有和react中state中的数据进行绑定，这个时候可以通过ref对value值进行读取--------随用随取

　　 class Demo extends React.Component{

            c = React.createRef()

            render(){

                return(

                    <div>

                        <input type="text" ref={this.c} />

                        <hr/>

                        <button onClick={this.show}>点击展示数据</button>

                    </div>

                )

            }

            show = () => {

                console.log(this.c.current.value);

            }

        }

        ReactDOM.render(<Demo/>,document.getElementById("demo"))

此时用户输入的内容于浏览器是未知的，只有在点击按钮时，通过ref对节点的value值进行读取，才会取到对应的值从而进行打印。

二 受控组件

input的输入内容，通过setState属性，储存到state中，打印的时候直接从state中取出数据进行操作；

class Demo extends React.Component{

            state = {

                value:''

            }

            render(){

                return(

                    <div>

                        <input type="text" onChange={this.saveValue} />

                        <hr/>

                        <button onClick={this.show}>点击展示数据</button>

                    </div>

                )

            }

            saveValue = (event) => {

                this.setState({

                    value:event.target.value

                })

            }

            show = () => {

                console.log(this.state.value);

            }

        }

        ReactDOM.render(<Demo/>,document.getElementById("demo"))