标签：target 23 绑定 value React state hobby setState

目录

受控组件

非受控组件

受控组件

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

实现步骤

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';
    }
}

标签：target,23,绑定,value,React,state,hobby,setState
来源： https://blog.csdn.net/qq_44914734/article/details/121680136

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。