React 受控组件和非受控组件

需求

• 创建一个表单组件然后提交

非受控组件

• 现用现取

 class Login extends React.Component {
    // 表单提交
    handleSubmit = () => {
        const {username, password} = this;
        alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
    }
    render() {
        return (
            <form action="#" onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" />
                密码：<input  ref={c => this.password = c} type="text" />
                <button>登录</button>
            </form>
        )
    }
}

受控组件（推荐）

• 随着你的输入将数据维护到状态里面
• 不会过度使用ref

 // 创建组件
class Login extends React.Component {
    state = {
        username: '', // 用户名
        password: '' // 密码
    }
    // 表单提交
    handleSubmit = () => {
        const { username, password } = this.state;
        alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }
    charsetf = (dataType) => {
       return event => this.setState({[dataType]: event.target.value});
    }
    render() {
        return (
            <form action="#" onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.charsetf('username')} type="text" />
                密码：<input onChange={this.charsetf('password')} type="text" />
                <button>登录</button>
            </form>
        )
    }
}