表单_非受控组件

在一个受控组件中，表单数据是由 React 组件来管理的，为每一个受控组件添加事件处理函数，这并不完美。

可以使用替代方案：使用非受控组件，这时表单数据将由 DOM 节点来处理。

xxxxxxxxxx
import React, { Component } from 'react'

export default class LoginForm extends Component {
    constructor(){
        super();
        this.username = React.createRef();
        this.password = React.createRef();
    }
    onSubmit=(e)=>{
        e.preventDefault();
      console.log(this.username.current.value,this.password.current.value);
    }
    render() {
        return (
            <div>
                <form onSubmit={ this.onSubmit }>
                    名字：<input defaultValue="baizhan"  type="text" ref={ this.username } /> <br />
                    密码：<input defaultValue="123456"  type="password" ref={ this.password } /> <br />
                    <input type="submit" value="登录"/>
                </form>
            </div>
        )
    }
}

提示：

如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。

实时效果反馈

1.下列描述错误的是：

A 使用受控组件则通过绑定事件获取用户输入

B 使用非受控组件则通过获取DOM获取用户输入

C 非受控组件设置初始值使用value

答案

1=>C