033_非受控组件

理解

包含表单的组件分类

\1. 受控组件

\2. 非受控组件

//创建组件
class Login extends React.Component {
    handleSubmit = () => {
        const {username, password} = this;
        alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`);
    };

    render() {
        return (
            <form action="http://www.baidu.com" 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('test'))

问题: 如何阻止页面刷新,以方便ajax来发送请求

这样就行了

//创建组件
class Login extends React.Component {
    handleSubmit = () => {
        event.preventDefault();// 阻止表单提交
        const {username, password} = this;
        alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`);
    };

    render() {
        return (
            <form action="http://www.baidu.com" 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('test'))

页面中所有输入类DOM,你要是现用现取,你就是非受控组件

现用现取: 你点登录之后: 才获取的值