React 受控组件和非受控组件

受控组件

在HTML中，表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。

而在React中，这些输入表单元素的值，应该保存在state中，并且只能由setState()进行更新。比如给表单元素绑定onChange事件，当input状态发生改变的时候，就会触发onChange事件，从而更新组件的state。

React中推荐使用受控组件，因为可以减少使用ref，受控组件可以理解为Vue中的数据双向绑定，只不过React没有替我们实现，需要自己绑定 onChange

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 action="xxx" 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('test1'));

非受控组件

非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。

在非受控组件中，可以使用一个ref来从真实DOM获得表单元素的值。

class Login extends React.Component {
    handleSubmit = (event) => {
        // 阻止表单提交的默认事件
        event.preventDefault()
        const {username, password} = this
        alert('你输入的用户名是：' + username.value + '，你输入的密码是：' + password.value)
    }

    render() {
        return (
            <form action="xxx" onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" name="username"/>
                密码：<input ref={c => this.password = c} type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}

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

总结

• 共同点，都是指表单元素，或者表单组件。
• 不同点，被react的state控制，就是受控组件。不被state控制，就是非受控组件。
• 受控组件的实现方式，就是设置state，调用setstate来更新数据和视图。
• 非受控组件使用ref等方式，更新数据和视图。