5.表单详解，获取input的text,select,radio,checkbox,textarea的值

内容

详解表单获取input的text,select,radio,checkbox,textarea的值

详细例子

class ReactForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '张三',
            sex: 1,
            city: '',
            citys: ['北京', '上海', '广州'],
            hobby: [
                { title: '吃饭', checked: true },
                { title: '睡觉', checked: false },
                { title: '写代码', checked: true }
            ],
            remark: ''
        };
    }

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

    submit = (e) => {
        let params = {
            name: this.state.name
        }
        console.log('params: ', params);
    }

    handleSex = (e) => {
        let val = e.target.value;
        this.setState({
            sex: val
        })
    }

    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }

    handleHobby = (key)=>{
        let hobby = this.state.hobby;
        hobby[key].checked = !hobby[key].checked;
        this.setState({
            hobby: hobby
        })
    }

    handleRemark = (e)=> {
        let val = e.target.value;
        this.setState({
            remark: val
        })
    }

    submit = (e)=>{
        e.preventDefault()
        console.log(this.state);
    }
    
    render() {
        return (
            <div>
                <form onSubmit={this.submit}>

                    用户名：<input type="text" value={this.state.name} onChange={this.handleName} />
                    <br /><br />

                    性别：
                        <input type="radio" value='1' checked={this.state.sex == 1} onChange={this.handleSex} />男  &nbsp;
                        <input type="radio" value='2' checked={this.state.sex == 2} onChange={this.handleSex} />女 <br /><br />

                    城市：
                    <select value={this.state.city} onChange={this.handleCity}>
                        {
                            this.state.citys.map((value, key) => {
                                return (
                                    <option key={key}>{value}</option>
                                )
                            })
                        }
                    </select>
                    <br /><br />

                    爱好:
                    {
                        this.state.hobby.map((value, key) => {
                            return (
                                <span key={key}>
                                    <input type="checkbox" checked={value.checked} onChange={this.handleHobby.bind(this,key)}/>{value.title}
                                </span>
                            )
                        })
                    }
                    <br /><br />

                    备注：<textarea value={this.state.remark} onChange={this.handleRemark}></textarea>


                    <br /><br />
                    <button type='submit'>提交</button>

                    <div> {this.state.name},{this.state.sex},{this.state.city} </div>
                </form>
            </div>
        );
    }
}