react表单

在web应用开发中,表单的作用尤为重要,正是因为表单的存在,才使得用户能够与web应用进行富交互。

文本框

import React from 'react'

class App extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            inputValue:'',
            textareaValue:''
        }
    }

    handleInputChange = (e) => {
        this.setState({
            inputValue:e.target.value
        })
    }

    handleTextChange = (e) => {
        this.setState({
            textareaValue:e.target.value
        })
    }

    render(){
        const {inputValue,textareaValue} = this.state
        return (
            <div>
                <p>单行输入框:<input type='text' value={inputValue} onChange={this.handleInputChange} /></p>
                <p>多行输入框:<textarea type='text' value={textareaValue} onChange={this.handleTextChange} /></p>
            </div>
        )
    }
}

export default App

你会发现表单操作变复杂了,一个简单的输入需要这么多代码,这是为什么呢?React.js 认为所有的状态都应该由 React.js 的 state 控制,只要类似于 <input />、<textarea />、<select /> 这样的输入控件被设置了 value 值,那么它们的值永远以被设置的值为准。值不变,value 就不会变化。

类似于 <input />、<select />、<textarea>这些元素的 value 值被 React.js 所控制、渲染的组件,在 React.js 当中被称为受控组件(Controlled Component)。对于用户可输入的控件,一般都可以让它们成为受控组件,这是 React.js 所推崇的做法。另外还有非受控组件

单选按钮与复选框

import React from 'react'

class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            radioValue:''
        }
    }

    handleChange = (e) => {
        this.setState({
            radioValue:e.target.value
        })
    }

    render(){
        const {radioValue} = this.state

        return(
            <div>
                <p>gender:</p>
                <label>
                    male:
                    <input
                        type='radio'
                        value='male'
                        checked={radioValue === 'male'}
                        onChange={this.handleChange}
                    />
                </label>
                <label>
                    female:
                    <input
                        type='radio'
                        value='female'
                        checked={radioValue === 'female'}
                        onChange={this.handleChange}
                    />
                </label>
            </div>
        )
    }
}

export default App
import React from 'react'

export default class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            coffee:[]
        }
    }

    handleChange = (e) =>{
        const {checked,value} = e.target
        let {coffee} = this.state

        if(checked && coffee.indexOf(value) === -1){ //当前被点击且coffee不包含这个值
            coffee.push(value)
        }else{
            coffee = coffee.filter(i => i!== value)
        }

        this.setState({
            coffee
        })
    }

    render(){
        const {coffee} = this.state
        return(
            <div>
                <p>请选择你最喜欢的coffee:</p>
                <label>
                    <input 
                        type='checkbox'
                        value='Cappuccino'
                        checked={coffee.indexOf('Cappuccino') !== -1}
                        onChange={this.handleChange}
                    />
                    Cappuccino
                </label>
                <br />
                <label>
                    <input 
                        type='checkbox'
                        value='CafeMocha'
                        checked={coffee.indexOf('CafeMocha') !== -1}
                        onChange={this.handleChange}
                    />
                    CafeMocha
                </label>
                <br />
                <label>
                    <input 
                        type='checkbox'
                        value='CaffeLatte'
                        checked={coffee.indexOf('CaffeLatte') !== -1}
                        onChange={this.handleChange}
                    />
                    Caffe Latte
                </label>
                <br />
                <label>
                    <input 
                        type='checkbox'
                        value='Machiatto'
                        checked={coffee.indexOf('Machiatto') !== -1}
                        onChange={this.handleChange}
                    />
                    Machiatto
                </label>
            </div>
        )
    }
}   

这个相比文本框变得更复杂了...所以react的表单也是被诟病的一点

select组件

import React, { Component } from 'react'

class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            area:''
        }
    }


    handleChange = (e) => {
        this.setState({
            area:e.target.value
        })
    }

    render(){
        const {area} = this.state
        return(
            <select value={area} onChange={this.handleChange}>
                <option value='beijing'>北京</option>
                <option value='shanghai'>上海</option>
                <option value='hangzhou'>杭州</option>
                <option value='wuhan'>武汉</option>
            </select>
        )
    }
    
}
export default App

这里仅仅实现了单选的下拉列表,接下来实现多选下拉列表

import React, { Component } from 'react'

class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            area:['hangzhou','wuhan']
        }
    }


    handleChange = (e) => {
        const options = e.target //对象
        const area = Object.keys(options)
            .filter(i => options[i].selected === true)
            .map(i => options[i].value)
        this.setState({
            area
        })
    }

    render(){
        const {area} = this.state
        return(
            <select multiple={true} value={area} onChange={this.handleChange}>
                <option value='beijing'>北京</option>
                <option value='shanghai'>上海</option>
                <option value='hangzhou'>杭州</option>
                <option value='wuhan'>武汉</option>
            </select>
        )
    }
    
}
export default App

受控组件

通过上面的示例,我们可以看出,每个input都绑定了一个change事件,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在react中被称为前面提到的受控组件。在受控组件中,组件渲染出的状态与它的value或checked prop相对应。react通过这种方式消除了组件的局部状态,使得应用的整个状态更加可控

总结下react受控组件更新state的流程

  1. 通过初始state设置表单的默认值

  2. 每当表单的值发生变化时,调用onChange事件处理器

  3. 事件处理器通过合成事件对象e拿到改变后的状态,并更新state

  4. setState触发视图的重新渲染,完成表单组件值的更新

非受控组件

如果一个表单没有value props(单选按钮和复选框对应的是checked props)时,就可以称为非受控组件,对应的,我们可以使用defaluProps和defaultChecked prop来表示组件的默认状态

import React, { Component } from 'react'


export default class App extends Component{
    constructor(props){
        super(props)
    }

    handleSubmit =(e) => {
        e.preventDefault();
        const {value} = this.refs.name
        console.log(value)
    }

    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input ref='name' type='text' defaultValue='wuhan' />
                <button type='submit'>Submit</button>
            </form>
        )
    }
}

非受控组件实质上是通过ref prop来访问渲染后的底层dom,但它的值不受自身的state或props控制,react官方更推荐受控组件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258

推荐阅读更多精彩内容