react里面写表单(封装后的表单)

	// 表单  ---- 封装
	
	import { Component } from "react";
	
	export default class Form3 extends Component {
	
	    constructor(props) {
	        super(props);
	        this.state = {
	            value: '',
	            pwd: '',
	            textarea: '',
	            like: '葡萄柚',
	            sex: '男',
	            hobby: [],
	            disagree: ['read']
	
	        };
	        //改变this的指向
	        this.handleChange = this.handleChange.bind(this);
	        
	        this.handleSubmit = this.handleSubmit.bind(this);
	    }
	
	    //表单
	    handleChange = (event,n)=> {
	
	        console.log('多',event.target.type);
	
	        //多选
	        if(event.target.type == 'checkbox') {
	
	            //判断多选框是否为选中状态
	            if(typeof this.state[event.target.name] == 'boolean'){
	                //勾选多选框
	                this.setState ({
	                    [event.target.name]: event.target.checked,
	                })
	            }else{
	                //取消勾选
	                let hobby = [...this.state.hobby];
	
	                if(event.target.checked){
	                    //爱好被勾选
	                    hobby.push(event.target.value);
	                }else{
	                    //取消勾选
	                    hobby.splice(hobby.indexOf(event.target.value),1);
	                }
	
	                this.setState({
	                    hobby
	                })
	            }
	
	        }else {
	            //单选
	            this.setState({  
	                [event.target.name]: event.target.value,
	            });
	        }
	        
	    }
	
	
	   
	
	    //提交
	    handleSubmit(event) {
	        console.log(`
	        姓名：${this.state.value} 
	        密码：${this.state.pwd} 
	        文本域：${this.state.textarea} 
	        口味：${this.state.like}
	        性别：${this.state.sex} 
	        爱好：${this.state.hobby}
	        合同协议：${this.state.disagree}`);
	        //阻止表单里面提交的默认跳转功能
	        event.preventDefault();
	    }
	
	    render() {
	        let {sex,disagree } = this.state;
	        return (
	            <form onSubmit={this.handleSubmit}>
	                <label>
	                    名字:
	                    <input type="text" name="value" value={this.state.value} onChange={this.handleChange} />
	                </label>
	
	
	                <label>
	                    密码:
	                    <input type="password" name="pwd" value={this.state.pwd} onChange={this.handleChange} />
	                </label>
	
	
	                <label>
	                    文章:
	                    <textarea value={this.state.textarea} name="textarea" onChange={this.handleChange} />
	                </label>
	                <br />
	                <br />
	                <br />
	                <hr />
	
	                <label>
	                    选择你喜欢的风味:
	                    <select value={this.state.like} name="select" onChange={this.handleChange}>
	                        <option value="葡萄柚">葡萄柚</option>
	                        <option value="酸橙">酸橙</option>
	                        <option value="椰子">椰子</option>
	                        <option value="芒果">芒果</option>
	                    </select>
	                </label>
	                <br />
	                <label>
	                    性别:
	                    <input type="radio" name="sex" value={'男'} onChange={this.handleChange} checked={sex == '男' ? true : false}/>男
	                    <input type="radio" name="sex" value={'女'} onChange={this.handleChange} checked={sex == '女' ? true : false}/>女
	                </label>
	                <br />
	
	                <label>
	                    兴趣：
	                    <input type="checkbox" name={"hobby"} value={'唱歌'}  onChange={this.handleChange} />唱歌
	                    <input type="checkbox" name={"hobby"} value={'跳舞'} onChange={this.handleChange} />跳舞
	                    <input type="checkbox" name={"hobby"} value={'阅读' }onChange={this.handleChange} />阅读
	                </label>
	                <br />
	
	                <label>
	                    合同签署协议：
	                    <input checked={disagree.includes('read')} type="checkbox" name={"disagree"} onChange={this.handleChange} />
	                </label>
	                <br />
	
	                <input type="submit" value="提交" />
	            </form>
	        );
	    }
	}