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官方更推荐受控组件

推荐阅读更多精彩内容