1.17 受控组件和非受控组件

1：受状态控制的组件，必须要有onchange方法，否则不能使用
2：受控组件可以赋予默认值（官方推荐使用受控组件）

// 实现数据双向绑定
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Input extends Component{
    constructor(){
        super()
        this.state={
            val:100
        }
    }
    //e是事件源
    handleChange=(e)=>{
        let val=e.target.value
        this.setState({val:val})
    }
    render(){
        return(
            <div>
                <input type="text" value={this.state.val} onChange={this.handleChange}/>
                {this.state.val}
            </div>
        )
    }
}
ReactDOM.render(<Input></Input> ,document.getElementById('root'))

// 受控组件
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Sum extends Component{
    constructor(){
        super()
        //这里必须是state
        this.state={
            val1:1,
            val2:1,
        }
    }
    change(arg,e){
        // 第一种写法
        // if(arg==1){
        //     this.setState({
        //         val1: parseInt(e.target.value)
        //     })
        // }
        // else if(arg==2){
        //     this.setState({
        //         val2:parseInt(e.target.value)
        //     })
        // }
        // 第2种写法
        this.setState({
            ['val'+arg]:parseInt(e.target.value)
        })
    }
    render(){
        return(
            <div>
                <input type="text" value={this.state.val1} onChange={(e)=>{this.change(1,e)}}/>
                <input type="text" value={this.state.val2} onChange={(e)=>{this.change(2,e)}}/>
                <p>{this.state.val1 + this.state.val2 }</p>
            </div>
        )
    }
}
ReactDOM.render(<Sum></Sum> ,document.getElementById('root'))

// 非受控组件，操作DOM
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
//输入框value不受状态控制，不能初始化默认值
class Sum extends Component{
    constructor(){
        super()
        //这里必须是state
        this.state={
            result:''
        }
    }
    //这里不能写成handleChange() {
    handleChange=()=>{
        // 通过ref设置的属性，可以通过this.refs获取到对应的DOM元素
        let result=this.refs.a.value + this.refs.b.value
        //第二种写法
        // let result= this.c.value
        this.setState({
            result
        })
    }
    render(){
        return(
            <div onChange={this.handleChange}>
                <input type="number" ref={'a'}/>
                <input type="number" ref={'b'}/>
                {/*x代表真实的DOM*/}
                {/*<input type="number" ref={x=>{ this.c=x }}/>*/}
                <p>{this.state.result }</p>
            </div>
        )
    }
}
ReactDOM.render(<Sum></Sum> ,document.getElementById('root'))

鉴于受控组件与非受控组件的特点，二者应用的地方也有所不同，主要表现在：

受控元素，一般用在需要动态设置其初始值的情况；例如某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。

非受控元素， 一般用于无任何动态初始值信息的情况； 例如form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况