react表单

非受控组件: 表单元素不受组件控制
受控组件: 表单元素的内容 是依赖于本组件的数据; 写了value之后 必须有onChange事件与之对应

import React from 'react';
import reactDOM from 'react-dom';

/**
 * 非受控组件:  表单元素不受组件控制
 * 受控组件:    表单元素的内容 是依赖于本组件的数据; 写了value之后 必须有onChange事件与之对应
 */
class App extends React.Component {
    constructor() {
        super();
    }
    state = {
        name: "",
        pwd: ""
    }
    submit = () => {
    	// 获取非受控组件里面的内容
        // console.log(this.nameInp.value, this.pwdInp.value);
        console.log(this.state);
        this.setState({
            name: "",
            pwd: ""
        })
    }
    changeName(e) {
    	// 受控组件里面的内容
        console.log(e.target.value);
        this.setState({
            name: e.target.value
        })
    }
    changePwd(e) {
        console.log(e.target.value);
        this.setState({
            pwd: e.target.value
        })
    }
    render() {
        let { name, pwd } = this.state
        return <div>
            {/* 非受控组件   获取元素、获取内容*/}
            {/* <input ref={(el) => { this.nameInp = el }} type="text" placeholder="请输入用户名" />
            <input ref={(el) => { this.pwdInp = el }} type="password" placeholder="请输入密码" /> */}

            {/* 受控组件 */}
            <input type="text" placeholder="请输入用户名" value={name} onChange={(e) => { this.changeName(e) }} />
            <input type="password" placeholder="请输入用户名" value={pwd} onChange={(e) => { this.changePwd(e) }} />
            <button onClick={this.submit}>提交</button>
        </div>;
    }
}

reactDOM.render(<><App /></>, document.querySelector("#root"))