input、select、checkbox、textarea表单的获取方式

 

import React, {Component} from 'react';


class ReactForm extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg: "react表单",
            name: 'woodie',
            gender: '1',
            city: '',
            citys:['北京','上海','广州'],
            hobby:[
                {
                    'title':'睡觉',
                    'cheched':true
                },
                {
                    'title':'吃饭',
                    'cheched':false
                },
                {
                    'title':'敲代码',
                    'cheched':true
                },
            ],
            info: '',
         };
    }

    handelName=(e)=>{
        this.setState({
            name: e.target.value
        })
    }

    handelSubmit=(e)=>{
        // 防止数据自动提交
        e.preventDefault();
        console.log(this.state.name,this.state.gender, this.state.city, this.state.hobby, this.state.info);
    }
    handelGender=(e)=>{
        this.setState({
            gender: e.target.value
        })
    }
    handelCity=(e)=>{
        this.setState({
            city: e.target.value
        })
    }
    handelHobby=(index)=>{
        var hobby=this.state.hobby;
        hobby[index].cheched=!hobby[index].cheched;
        this.setState({
            hobby: hobby
        })
    }
    handelInfo=(e)=>{
        this.setState({
            info: e.target.value
        })
    }
    render() {
        return (
            <div>
                {this.state.msg}
                
                <form onSubmit={this.handelSubmit} >
                    {/* 普通input的 */}
                    用户名: <input type="text" value={this.state.name} onChange={this.handelName} />
                    <br/>
                    性别: 男<input type="radio" value="1" checked={this.state.gender==="1"} onChange={this.handelGender} />
                        女<input type="radio" value="2" checked={this.state.gender==="2"} onChange={this.handelGender} />

                    <br/>
                    居住城市:
                    <select onChange={this.handelCity} value={this.state.city}>
                        {
                            this.state.citys.map(function(value, index){
                                return <option key={index}>{value}</option>
                            })
                        }
                    </select>
                    <br/>
                    爱好:
                    {
                        this.state.hobby.map((value, index)=>{
                            return (
                                <span key={index}>
                                    {value.title}
                                    <input type="checkbox" checked={value.cheched} onChange={this.handelHobby.bind(this, index)} />
                                </span>
                            )
                        })
                    }
                    <br/>
                    备注：<textarea value={this.state.info} onChange={this.handelInfo} />
                    <br/>

                    {/* 这里提交后由form标签处理数据 */}
                    <input type="submit" defaultValue="123" />
                </form>

            </div>
        );
    }
}

export default ReactForm;