React 之form表单、select、textarea、checkbox使用

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;

原文地址:https://www.cnblogs.com/ywjfx/p/10421666.html

时间: 2024-10-07 07:24:14

React 之form表单、select、textarea、checkbox使用的相关文章

react之form表单工具:formik+yup

从网上搜到的form表单解决方案如下: 1.uform,地址:https://uformjs.org/#/MpI2Ij/dNFzFyTb UForm 和核心特性: 基于标准 JSON Schema 协议,数据化构建表单 基于 rxjs 对表单内部的副作用做统一管理,轻松解决各种复杂联动校验场景 支持各种表单布局方案 支持可视化构建表单 支持自定义组件扩展 分布式状态管理,表单性能更高 不足:基于styled-components来开发的,涉及到的自定义样式主要是Form和FormItem层面上的

HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!--form表单--> <form> 用户名: <!--文本域--> <input type="text">

form表单select联动

下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取option的个数 selectedIndex:当前选中的option的索引号 option对象的常用属性 text:指<option></option>中的文本 value:指option对象的value属性 index:指每个option对象的索引号 selected:当前option是否

form表单select的选项值选择

html: <form action=""> <p>选择城市</p> <p> <select name="" id="cont"> <option value="北京" order="1">北京</option> <option value="上海" order="2">上

Form表单之复选框checkbox操作

input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1 <input type="checkbox" name="checkbox1"

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

form表单里如果只存在一个文本框,enter键提交

在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个input输入框时,回车会提交表单操作.  解决方法可以在form里面再加入一个隐藏的input输入框,或者把input从form里面放出来. 2).当form表单里有一个type=”submit”的按钮,回车会自动提交. 3).当form表单里的button按钮没有加type类型时,在ie下默认是but

Javascript中的Form表单知识点总结

在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,因此与其他HTML元素具有相同的默认属性:HTMLFormElement有自己以下属性和方法: acceptCharset: 服务器能够处理的字符集:等价于HTML中的accept-charset特性: action:  接收请求的URL,等价于HTML中的action elements: 表单中所有控件的集合. enctype: 请求的编码类

form表单回车提交问题

最近发现在form里的一个input敲击回车键时会提交form表单.查了资料,发现会出现这个情况的原因是浏览器帮我们做了处理.这里总结几条规则: 1. 如果表单里有一个type="submit"的按钮,回车键生效. 2. 如果表单里只有一个type="text"的input,回车键生效. 3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit 4. 其他表单元素如textarea.