React受控表单组件和非受控表单组件

一、受控表单组件

input框自己的状态被React组件状态控制

受控组件就是可以被react的状态控制的组件

React组件的状态在state中，input表单元素的状态在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性。

实现步骤：

以获取文本框的值为例，受控组件的使用步骤如下：

1.在组件的state中声明一个组件的状态数据

2.将状态数据设置为input标签元素的value属性的值

3.为input添加change事件

4.在事件处理程序中，通过事件对象e获取当前文本框的值（即用户当前输入的值）

5.调用setState方法，将文本框的值作为state状态的最新值

import React from 'react'

class Counter extends React.Component {
  //1.声明用来控制input value的react组件自己的状态
  state = {
    message: 'hello！'
  }

  render() {
    return (
      <div>
        {/* 2.给input框的value属性绑定react state */}
        {/* 3.给input框绑定一个change的事件 为了拿到当前输入框中的数据 */}
        <input type='text' value={this.state.message} onChange={this.inputChange} />
      </div>
    )
  }

  inputChange = (e)=>{
    console.log('触发change事件',e);
    this.setState({
      message: e.target.value,
    })
  }
  
}

function App() {
  return (
    <div>
      <Counter/>
    </div>
  )
}


export default App;

 

二、非受控表单组件

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值。

实现步骤：

1.导入createRef函数

2.调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中

3.为input添加ref属性，值为msgRef

4.在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

import React, {createRef} from 'react'

class Input extends React.Component {
  // 这个实例属性是自定义的 语义化即可
  msgRef = createRef()

  render() {
    return (
      <div>
        <input type='text' ref={this.msgRef} />
        <button onClick={this.getValue}>点击获取输入框的值</button>
      </div>
    )
  }

  getValue = ()=>{
    //通过msgRef获取input value值
    console.log(this.msgRef.current.value);
  }
}

function App() {
  return (
    <div>
      <Input/>
    </div>
  )
}

export default App;