react---受控组件和非受控组件

受控组件 在HTML中 input textarea select 这些表单元素 可以根据用户的输入变更自身的状态 （数据） react中可变状态放在state中 把两者结合起来 让react的state成为单一数据源 这样的组件称为受控组件

简单来说 就是表单元素的value绑定state里面的属性 然后当表单的value更新state中的数据 即受控组件就是state控制的组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Input extends Component{
    constructor(){
        super()
        
        this.state = {
            val:100
        }
        
    }
    render(){
        return(<div>
        <input type = "text" value = {this.state.val} onChange = {this.changeVal}/>
        <p>{this.state.val}</p>
        </div>)
    }
}
ReactDOM.render(<Input />, document.querySelector('#root'))

非受控组件 不受react控制的组件 value值在DOM元素上 此时需要用ref获取表单元素的值

1. ref 是react 提供的用来操作DOM的 使用ref 需创建ref 然后在被获取的DOM对象上使用ref即可 创建ref 在构造函数中创建Ref
2. 非受控组件 通过ref 获取DOM 元素 然后通过value属性获取该表单元素的值

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Sum extends Component {
 constructor () {
   super()

   this.state = {
     num: 0
   }

   this.myRefA = React.createRef() // 创建 ref，在构造函数中创建 ref
   // this.myRefB = React.createRef()
 }

 changeState = () => {
   // 使用 ref ：当组件挂载后，通过 ref 属性的 current 属性访问该 DOM 元素
   // this.myRefA.current 就是 第一个 input
   // this.myRefB.current 就是 第二个 input
   // console.log(this.myRefA.current)
   let num = +this.myRefA.current.value + +this.myRefB.current.value;
   this.setState({
     num
   })
 }

 render () {
   return (<div onChange={this.changeState}>
     {/*在 DOM 元素中使用 ref，ref 的值是上面创建的 ref*/}
     <input type="text" ref={this.myRefA} /> <br/>
     {/*ref 第二种形式，设置一个箭头函数，this.myRefB 就是第二个 input 的 ref，el 就是这个 input，这个函数会在组件挂载后执行，执行后在父组件的 this 上的 myRefB 就是这个 input 元素了*/}
     <input type="text" ref={(el) => {this.myRefB = el} } />
     <p>{this.state.num}</p>
   </div>)
 }
}

ReactDOM.render(<Sum />, document.getElementById('root'))