React控件表单

React控件表单 就是通过状态state实时更新并收集信息的Form表单。

下面简单地实现了React表单中的单选、多选、下拉框以及输入框的表单功能。

import React,{Component} from 'react'

export default class FormData extends Component{
    state={
        val: '',
        sex: '0',
        posily: '职务',
        position: ['班长','副班长','纪律委员'],
        hobby: 
        [
            { text:'游泳健身',checked:true },
            { text:'休闲娱乐',checked:false },
            { text:'肥宅快乐水',checked:false },
        ]
    }
    //提交事件
    handleSubmit = (e) => {
    	//阻止默认提交事件
        e.preventDefault()
        const {val,sex,posily,hobby} = this.state
        console.log(val,sex,posily,hobby);
    }
    //输入框
    handleChange = (e) => {
        this.setState({
            val: e.target.value
        })
    }
    //单选框
    handleSex = (e) => {
        this.setState({
            sex: e.target.value
        })
    }
    //下拉框
    handleSelect = (e) => {
        this.setState({
            posily: e.target.value
        })
    }
    //多选框
    handleCheckbox = (index) => {
        const {hobby} = this.state
        hobby[index].checked = !hobby[index].checked
        this.setState({hobby})
    }
    render(){
        const {val,sex,posily,position,hobby} = this.state
        return(
            <>
                <h1>React表单</h1>
                <form onSubmit = {this.handleSubmit}>
                    <input type = "text" value = {val} onChange={this.handleChange}/>
                    <input 
                        type ="radio"
                        value ="0"
                        checked = {sex ==='0'}
                        onChange = {this.handleSex}
                    />男
                    <input 
                        type ="radio"
                        value ="1"
                        checked = {sex ==='1'}
                        onChange ={this.handleSex}
                    />女
                    <select value={posily} onChange={this.handleSelect}>
                        {
                            position.map((item,index)=>{
                                return <option value={item} key={index}>{item}</option>
                            })
                        }
                    </select>
                    爱好：
                    {
                        hobby.map((item,index) => {
                            return (
                                <div key={index}>
                                    <input 
                                        type="checkbox"
                                        checked = {item.checked}
                                        onChange = {this.handleCheckbox.bind(this,index)}
                                    />{item.text}
                                </div>
                            )
                        })
                    }
                    <button type="submit">submit</button>
                </form>
            </>
        )
    }
}

大致的效果图如下，原始样式仅供参考：