React 受控表单组件

刺骨的言语ヽ痛彻心扉 2023-01-01 05:50 162阅读 0赞

# React 受控表单组件 #

受控组件（Controlled Component）：  
组件的数据受到state组件状态的控制（组件的数据和state组件状态双向绑定）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

const { Component,Fragment} = React;
    //受控表单组件
    class FormItem extends Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                nick:'',    //绑定昵称文本框
                chars:0,    //已经输入的文本个数
                charFull:20,    //总共能输入20个
                msg:'', //绑定留言多行文本域
                workers:['教师','学生','军人','厨师','司机'],  //为职务单选框提供数据
                worker:'',  //绑定职务数据(取值为字符串)
                favs:['旅游','游戏','音乐','电影','读书','睡觉'],    //为爱好复选框提供数据
                fav:[], //为爱好绑定复选框(取值为数组)
                specs:['前端开发专业','PHP开发专业','Java开发专业','UI设计专业','软件工程专业'],    //为专业提供原始数据
                spec:'前端开发专业',    //为专业绑定数据
                courses:['HTML','CSS','jQuery','JavaScript','DOM','Vue.js','React.js'],
                course:['jQuery']
            }
        }
        //昵称的onChange事件
        nickChange(event){ 
            this.setState({ 
                nick:event.target.value
            })
        }
        //职务的onChange事件
        workerChange(event){ 
            this.setState({ 
                worker:event.target.value
            })
        }
        //爱好的onChange事件
        favChange(event){ 
            let temp = event.target.value;  //用户单选的那一项
            let fav = [...this.state.fav];
            let index = fav.findIndex(item=>item === temp);
            if(index !== -1){    //单击该复选框时,该复选框的value属性取值在fav数组中存在
                fav.splice(index,1);
            }else{   //单击该复选框时,该复选框的value属性取值在fav数组中不存在
                fav.push(temp);
            }
            this.setState({ 
                fav
            })
    
        }
        //专业的onChange事件
        specChange(event){ 
            this.setState({ 
                spec:event.target.value
            })
        }
        //选修的onChange事件
        courseChange(event){ 
            // //方案一:实现列表不需要借助快捷键就能通过单击鼠标完成选中或取消选中
            // let value = event.target.value; //最后选中的哪一个列表项的value取值
            // let course = [...this.state.course];
            // let index = course.findIndex(item=>item===value);
            // //判断value值是否在course数组中出现过
            // if(index >= 0){ 
            // course.splice(index,1)
            // }else{ 
            // course.push(value)
            // }
            // this.setState({ 
            // course
            // })
    
            // //方案二:实现列表借助快捷键(Ctrl、Shift)完成多选功能
            // let options = event.target.options; //返回由所有的<option>标记组成的对象,对象的属性名:所以只(0,1,2,3,...),对象的属性值:<option>DOM节点
            // let temp = []; //盛放被选中的options项的索引值的数组
            // for(let i in options){ 
            // if(options[i].selected){ 
            // temp.push(i)
            // }
            // }
            // let course = temp.map(item=>options[item].value);
            // this.setState({ 
            // course
            // })
    
            //方案三:(同方案二原理,简化版)
            let options = event.target.options;
            let course = Object.keys(options).filter(item=>options[item].selected === true).map(item=>options[item].value);
            this.setState({ 
                course
            })
        }
        //留言的onChange事件
        textareaChange(event){ 
            let temp = event.target.value.slice(0,this.state.charFull);
            this.setState({ 
                msg:temp,
                chars:temp.length
            })
        }
        //留言按钮的单击事件
        btnClick(){ 
            console.log(`昵称：${ this.state.nick}`);
            console.log(`职务：${ this.state.worker}`);
            console.log(`爱好：${ this.state.fav}`);
            console.log(`专业：${ this.state.spec}`);
            console.log(`选修：${ this.state.course}`);
            console.log(`留言：${ this.state.msg}`);
        }
        render(){ 
            return(
                <Fragment>
                    <div className="container">
                        <div className="row">
                            <div className="col-md-12">
                                <h1>React受控表单元素组件</h1><hr/>
                            </div>
                            <div className="col-md-12">
                                <div className="form-group">
                                    <label>昵称：</label>
                                    <input type="text" value={ this.state.nick} className="form-control" onChange={ ()=>this.nickChange(event)} />
                                </div>
                                <div className="form-group">
                                    <label>职务：</label>
                                    { 
                                        this.state.workers.map((item,index)=>{ 
                                            return (
                                                <Fragment key={ index}>
                                                    <input type="radio"value={ item} checked={ this.state.worker == item} onChange={ ()=>this.workerChange(event)}
                                                    style={ { marginLeft:'10px'}}/>{ item}
                                                </Fragment>
                                            )
                                        })
                                    }
                                </div>
                                <div className="form-group">
                                    <label>爱好：</label>
                                    { 
                                        this.state.favs.map((item,index)=>{ 
                                            return (
                                                <Fragment key={ index}>
                                                    <input type="checkbox" value={ item} checked={ this.state.fav.includes(item)} onChange={ ()=>this.favChange(event)}
                                                           style={ { marginLeft:'10px'}} />{ item}
                                                </Fragment>
                                            )
                                        })
                                    }
                                </div>
                                <div className="form-group">
                                    <label>专业：</label>
                                    <select value={ this.state.spec} onChange={ ()=>this.specChange(event)} className="form-control">
                                        { 
                                            this.state.specs.map((item,index)=>{ 
                                                return (
                                                    <option value={ item} key={ index}>{ item}</option>
                                                )
                                            })
                                        }
                                    </select>
                                </div>
                                <div className="form-group">
                                    <label>选修：</label>
                                    <select className="form-control" multiple size={ this.state.courses.length} value={ this.state.course} onChange={ ()=>this.courseChange(event)}>
                                        { 
                                            this.state.courses.map((item,index)=>{ 
                                                return (
                                                    <option value={ item} key={ index}>{ item}</option>
                                                )
                                            })
                                        }
                                    </select>
                                </div>
                                <div className="form-group">
                                    <label>留言：（已输入：{ this.state.chars}/{ this.state.charFull}）</label>
                                    <textarea value={ this.state.msg} rows="10" className="form-control" onChange={ ()=>this.textareaChange(event)}></textarea>
                                </div>
                                <div className="form-group">
                                    <button className="btn btn-primary" onClick={ ()=>this.btnClick()}>提交留言</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </Fragment>
            )
        }
    }
    
    ReactDOM.render(
        <div>
            <FormItem></FormItem>
        </div>,
        document.getElementById('userForm')
    )

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: /images/20221120/e8e7bf7a177a40d1a55c68efb8b29e89.png