React 之form表单selecttextareacheckbox使用

Posted 2021-02-10 ywjfx

1、案例如下

import React from ‘react‘;

/**
 * 非约束性组(类似defaultValue等属性，不可以程序修改):
         <input type="text" defaultValue="a" />   这个 defaultValue 其实就是原生DOM中的 value 属性。
         这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。

 约束性组件(可以修改属性值)：
         <input value={this.state.username} type="text" onChange={this.handleUsername}  />
         这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
         这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。
         不过React会优化这个渲染过程。看上去有点类似双向数据绑定
 */
class Home6 extends React.Component{
    constructor(props){
        super(props);
        this.state = {

            msg:"react表单",
            name:‘杨文杰‘,
            sex:‘1‘,
            city:‘‘,
            citys:[

                ‘北京‘,‘上海‘,‘深圳‘
            ],
            hobby:[
                {
                    ‘title‘:"睡觉",
                    ‘checked‘:true
                },
                {
                    ‘title‘:"吃饭",
                    ‘checked‘:false
                },
                {
                    ‘title‘:"敲代码",
                    ‘checked‘:true
                }
            ],
            info:‘‘

        };
    }

    /**
     * 获取用户名
     * @param e
     */
    handelSubmit=(e)=>{
        //阻止submit的提交事件
        e.preventDefault();
        console.log(this.state.name,this.state.city);
    }
    handelName=(e)=>{
        this.setState({
            name:e.target.value
        })
    }
    /**
     * 男女单项选择
     * @param e
     */
    changeSex=(e)=>{
        this.setState({
            sex:e.target.value
        })

    }
    /**
     * 获取select中的城市
     */
    getCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }

    /**
     * 注意：爱好有多个值
     * @param e
     */
    changeHobby(key){
        var hobby = this.state.hobby;
        hobby[key].checked=!hobby[key].checked;
        this.setState({
            hobby:hobby
        })
    }

    handleInfo=(e)=>{
        this.setState({
            info:e.target.value
        })
    }
    render() {
        return(
            <div>
                这是HOME6组件
                <br/>
                {this.state.msg}
                <p>for表单获取值</p>
                <form onSubmit={this.handelSubmit}>
                    用户名:<input type="text" value={this.state.name} onChange={this.handelName}/>
                    <input type="radio" value="1" checked={this.state.sex==1} onChange={this.changeSex}/>男
                    <input type="radio" value="2" checked={this.state.sex==2} onChange={this.changeSex}/>女 <br/>
                    <input type="submit" defaultValue="提交"/>
                    <br/>
                    居住城市:
                    <select value={this.state.city} onChange={this.getCity}>
                        {
                            this.state.citys.map(function (value,key) {
                               return <option key={key}>{value}</option>
                            })
                        }
                    </select>
                    <br/>
                    爱好:
                    {   //注意key值指向
                        this.state.hobby.map( (value,key)=>{
                            return (<span key={key}>
                                        <input type="checkbox" checked={value.checked} onChange={this.changeHobby.bind(this,key)}/>{value.title}
                                     </span>)
                        })
                    }
                    <br/>
                    评论区:
                    <textarea value={this.state.info} onChange={this.handleInfo}>

                    </textarea>

                </form>
            </div>
        )
    }
}
export default Home6;