目录

受控组件

非受控组件

---

受控组件

作用：手动实现表单元素双向数据绑定的过程

实现步骤

1. 定义一个state状态数据, 和表单元素进行绑定
2. 在表单元素上注册change事件, 在change事件处理函数中手动获取表单内容同步到数据层

import React, { Component } from 'react';
export default class MyForm extends Component {
    constructor(){
        super();
        // 定义状态数据
        this.state={
            // 和input输入框进行绑定的数据
            name:'jack',
            // 和单选框进行绑定的数据
            sex:'男',
            // 和下拉框进行绑定的数据
            job:'*职业',
            // 和复选框进行绑定的数据
            hobby:['读书','敲代码','写字'],
            // 和文本域进行绑定的数据
            introduce:'个人介绍'
        }
    }
    render() {
        return (
            <div className="form-container">
                <h3>{this.state.name}</h3>
                <h3>{this.state.sex}</h3>
                <h3>{this.state.job}</h3>
                <h3>{this.state.hobby}</h3>
                <h3>{this.state.introduce}</h3>
                <hr/>
          			/*{input输入框}*/
                <div className="form-group">
                    <input onChange={(e)=>this.intputHandler(e)} value={this.state.name} 
                    type="text" placeholder="请输入内容"/>
                </div>
								/*{单选框}*/
                <div className="form-group">
                    <input checked={this.state.sex==='男'}  name="sex" type="radio" onChange={e=>this.setState({sex:e.target.value})} value="男"/> 男
                    <input checked={this.state.sex==='女'} name="sex" type="radio" onChange={e=>this.setState({sex:e.target.value})} value="女"/> 女
                </div>
								/*{下拉列表框}*/
                <div className="form-group">
                    <select defaultValue={this.state.job} onChange={e=>this.setState({job:e.target.value})}>
                        <option value="">请选择职业</option>
                        <option value="公务员">公务员</option>
                        <option value="程序员">程序员</option>
                        <option value="*职业">*职业</option>
                    </select>
                </div>
								/*{多选框}*/
                <div className="form-group">
                    <input checked={this.state.hobby.includes('读书')} onChange={e=>this.hobbyHandler(e)} type="checkbox" value="读书"/> 读书
                    <input checked={this.state.hobby.includes('写字')} onChange={e=>this.hobbyHandler(e)} type="checkbox" value="写字"/> 写字
                    <input checked={this.state.hobby.includes('敲代码')} onChange={e=>this.hobbyHandler(e)} type="checkbox" value="敲代码"/> 敲代码
                </div>
								/*{多行文本域}*/
                <div>
                    <textarea placeholder="请输入个人介绍" value={this.state.introduce} 
                    onChange={e=>this.setState({introduce:e.target.value})} cols="30" rows="3"></textarea>
                </div>
            </div>
        )
    }
    // input输入框的change事件处理函数
    intputHandler(e){
        // 手动同步用户输入的内容到数据层
        // console.log(e.target.value);
        this.setState({name:e.target.value});
    }
    // 复选框change事件处理函数
    hobbyHandler(e){
        // 如果用户选择了复选框, 获取复选框的value, 追加到this.state.hobby数组中
        // 如果用户取消了选择, 从this.state.hobby中移出对应的数组元素
        if(this.state.hobby.includes(e.target.value)){
            // 移出对应的数组元素
            // 根据数组元素获取数组索引
            const index=this.state.hobby.findIndex(item=>item===e.target.value);
            // 根据数组索引删除数组元素
            this.state.hobby.splice(index,1);
        }else{
            this.state.hobby.push(e.target.value);
        }
        // 通知视图更新
        this.setState({});
    }
}

非受控组件

        作用:通过ref属性操作表单元素

        实现步骤

import React, { Component,createRef } from 'react';

export default class Login extends Component {
    // 创建ref对象
    password=createRef();
    render() {
        return (
            <div>
                <div>
                    用户名: <input ref={dom=>this.username=dom} type="text" placeholder="请输入用户名"/>
                </div>
                <div>
                    密码: <input ref={this.password} type="text" placeholder="请输入密码"/>
                </div>
                <div>
                    <button onClick={()=>this.login()}>立即登录</button>
                    <button onClick={()=>this.setData()}>自动设置</button>
                </div>
            </div>
        )
    }

    login(){
        // 非受控组件的方式获取表单元素的内容
        const username=this.username.value;
        const password=this.password.current.value;
        console.log(username,password);
    }
    setData(){
        // 设置账号
        this.username.value='jack';
        // 设置密码
        this.password.current.value='123456';
    }
}