React 之form表单selecttextareacheckbox使用

Posted ywjfx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 之form表单selecttextareacheckbox使用相关的知识,希望对你有一定的参考价值。

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;

 

以上是关于React 之form表单selecttextareacheckbox使用的主要内容,如果未能解决你的问题,请参考以下文章

React开发(130):ant design学习指南之form中的新城多个表单

react 之 fetch 登录请求formData提交参数

React开发(131):ant design学习指南之form中的resetFields

组件分享之前端组件——用于自定义表单的前端组件form-create

react怎么收集整个form表单的值

react form 赋值