17.受控组件与非受控组件

非受控组件

在 HTML 中，表单元素（如、 和 ）通常自己维护 state，并根据用户输入进行更新。像这样自己维护状态的组件称为非受控组件，简单理解就是不受到react中的state的约束的组件

    <script type="text/babel">
        class Login extends React.Component {
            saveUsername = (c) => {
                this.username = c;
            }

            savePassword = (c) => {
                this.password = c.value;
            }

            handleSubmit = (event) => {
                event.preventDefault();
                const {username,password} = this;
                alert(`登录名是${username.value},密码是${password.value}`);
            }
            render(){
                return (
                    <form onSubmit = {this.handleSubmit}>
                        用户名:<input ref={this.saveUsername} type="text" name="username"/>
                        密码:<input ref={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>

受控组件

在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username:'',
                password:'',
            }
            saveUsername = (event) => {
                this.setState({username:event.target.value});
            }

            savePassword = (event) => {
                this.setState({password:event.target.value});
            }

            handleSubmit = (event) => {
                event.preventDefault();
                const {username,password} = this.state;
                alert(`登录名是${username},密码是${password}`);
            }
            render(){
                return (
                    <form onSubmit = {this.handleSubmit}>
                        用户名:<input onChange={this.saveUsername} type="text" name="username"/>
                        密码:<input onChange={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>