3、react表单

1、受控组件

含义：在HTML表单元素中，他们通常自己维护一套state，并随着用户的输入自己进行UI上的更新，这种行为是不被我们程序所控制的。而如果将React里的state属性和表单属性的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫受控组件

import React, { Component,createRef } from 'react'

export default class Cobtroled extends Component {
    constructor(props) {
        super(props)
        this.ipt=createRef()
    }
    state={
        textValue: 'hello'
    }
    handleChan(e){
        this.setState({
            textValue: e.target.value
        })
    }
    render() {
        return (
            <div>
                //受控组件
                {/* <input value={this.state.textValue} type="text" onChange={this.handleChan.bind(this)}/> */}
                //不受控组件
                <input type="text" ref={this.ipt} onInput={this.handleChan.bind(this)}/>
            </div>
        )
    }
    componentDidMount() {
        setTimeout(() => {
            console.log(this.state.textValue)
        }, 5000);
    }
}

2、事件处理：

1、JS函数柯里化

import React, { Component } from 'react'

export default class Form extends Component {
    state = {
        value:''
    }

    handleChange=()=>{
        return(e)=>{
            this.setState({
                value:e.target.value  
            })
        }
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange()}/>
            </div>
        )
    }
}

2、构造函数

import React, { Component } from 'react'

export default class Form extends Component {
    state = {
        value: ''
    }
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
            </div>
        )
    }
}