React中非受控组件-ref与受控组件理解

内容

• 受控组件是通过 React 组件的状态来控制表单元素的值

• 非受控组件是通过手动操作 DOM 的方式来控制

• 此时，需要用到一个新的概念：ref

• ref：用来在 React 中获取 DOM 元素

非受控组件-ref

ref的使用格式

步骤

1. 导入方法。import { createRef } from 'react'

2. 调用createRef方法创建引用，假设名为refDom。 const refDom = createRef()

3. refDom设置给表单元素的ref属性。<input ref={refDom}/>

4. 通过refDom.current.value来获取值。console.log(this.refDom.current.value)

示例代码

// 1. 导入方法
import { createRef } from 'react'

class Hello extends Component {
  // 2. 调用createRef方法创建引用
  txtRef = createRef()

  handleClick = () => {
    // 4. 通过.current.value来获取值
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-非受控组件-ref</h1>
         {/* 3. 设置给表单元素的ref属性 */}
        <p><input type="text" ref={this.txtRef}/></p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}

受控组件

掌握使用受控组件的方式来获取表单元素的值

如何理解受控

正常情况下，表单元素input是可任意输入内容的，可以理解为input自己维护它的状态（value）

受控组件的思路：

1. 在state中定义状态

2. 将state中的状态与表单元素的value值绑定到一起，进而通过state中的状态来控制表单元素的值

受控组件：value值受到了react控制的表单元素

基本步骤

1. 在state中定义状态

2. 对表单元素做两件事

   1. 设置value为上面定义的状态

   2. 绑定onChange事件，并在回调中通过setState来修改状态值  

示例

class App extends React.Component {
  state = {
    // 1. 在state中定义状态
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
  
  handleClick = （）=> {
    console.log(this.state.msg)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-受控组件</h1>
        <p>
        {/* 2. 对表单元素做两件事 */}
          	<input type="text"
							value={this.state.msg}
							onChange={this.handleChange}
						/>
        </p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}