React中的受控组件和非受控组件

受控组件

受控组件：受状态控制的组件，表单元素中一旦写了value就是受控组件了
表单类的元素受状态值控制，这就是一个受控组件
受控组件：受状态控制，不能直接修改内容
代码如下

import React from 'react';
import ReactDOM from 'react-dom'

class Panel extends React.Component {
    constructor(){
        super();
        this.state = {
            num:100,
            ss:99,
            val:55
        }

    }
    change = (e,type)=>{
        // 如果需要修改input框的value值，那么久需要修改state，那么input框的内容就会发生变化

        // 通过事件对象获取到当前的事件源，在通过事件源获取到内容(value)
        // 在对state中的num重新赋值
        console.log(e,type)
        // this.setState({num:e.target.value})

        // 属性名可以放变量
        this.setState({[type]:e.target.value})
    }
    render(){
        return (<div>
            <div>{this.state.num}</div>
            <div>{this.state.ss}</div>
            <div>{this.state.val}</div>
            <input type="text" value={this.state.num} onChange={ (e)=>{this.change(e,'num')} }></input>
            {/* value={this.state.num}这样写以后，当前inputed框里面的值受value控制了，更改不了，要想修改数据，需要绑定事件onChange={ (e)=>{this.change(e,'num')} inputed框中的值发生变化后，视图对应的值也会发生变化 */}
            <input type="text" value={this.state.ss} onChange={ (e)=>{this.change(e,'ss')} }></input>
            <input type="text" value={this.state.val} onChange={ (e)=>{this.change(e,'val')} }></input>
        </div>)
    }
}

ReactDOM.render(<Panel/>,document.querySelector('#root'))

非受控组件

不受状态控制的组件
写一个简单的小案例，通过input中的ref属性来实现，组件的实例上有一个refs是个对象，存放着每一个ref,下面这个代表着每一个input框，可以直接拿到原生的标签

import React from 'react';
import ReactDOM from 'react-dom'


class Panel extends React.Component {
    constructor() {
        super();
        this.state = {
            result: ''
        }

    }
    //下面两种方法都可以实现，一般用第二种
    change = () => {
        // 如果给元素的行间属性加上ref，那么就会把该元素放到组件实例的refs这个对象里
        // ref:可以是字符串或者函数，如果是函数，他会默认将当前元素传递给当前函数的第一个形参
        console.log(this)
        console.log(this.refs) // refs是组件实例天生自带的
        //  console.log(this.refs.a.value)
        //第一种
        // let result = Number(this.refs.a.value) + Number(this.refs.b.value);
        // this.setState({ result })
        //第二种
        let result = Number(this.refs.a.value) + Number(this.b.value);
        this.setState({ result })
    }
    render() {
        return (<div>
            {/* 第一种 */}
            <input type="text" ref="a" onChange={this.change}></input> +
            {/* 第二种 x这个参数就是当前的元素 */}
            <input type="text" ref={(x) => { this.b = x }} onChange={this.change}></input> =
            {this.state.result}
        </div>)
        //ref不仅可以放字符串，也可以放对象
    }
}

ReactDOM.render(<Panel/>, document.querySelector('#root'))