react.js受控组件和非受控组件

受控和非受控即表单元素的值是否与状态绑定

1. 受控=>与状态绑定
2. 非受控=>与状态不绑定

非受控写法：

import React, { Component } from 'react'

export default class index extends Component {
    handleSnbmit() {
        console.log(this.refs.username.value)
        console.log(this.refs.password.value)
    }
    render() {
        return (
            <form action="###">
                <div className="item">
                    <label>用户名</label>
                    <input ref="username" />
                </div>
                <div className="item">
                    <label>密码：</label>
                    <input ref="password" />
                </div>
            </form>
        )
    }
}

受控写法：

import React, { Component } from 'react'

export default class home extends Component {
    state={
        // 第一步
        username:'1234',
        password:'123'
    }
    handleSnbmit() {
        console.log(this.state)
    }
    render() {
        return (
            <form action="###">
            <div className="item">
                <label>用户名</label>
                {/* 第二步：必须提供onChang事件 */}
                <input value={this.state.username} onChange={(ev)=>this.setState({
                    username:ev.target.value
                })} />
            </div>
            <div className="item">
                <label>密码：</label>
                <input ref="password" />
            </div>
        </form>
        )
    }
}