React——关于表单元素

关于React 处理表单元素，有两种方式:

1. 受控组件【推荐】
2. 非受控组件

受控组件-表单元素（状态可变，react的state控制）

• HTML中表单元素是可输入的，即表单用户并维护着自己的可变状态（input 的 value）。
• 可变状态保存在state中，只能通过setState进行修改。
• React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
• 受控组件：value值受到了react控制的表单元素 （value的双向绑定，如onInput、onchange、value）
• 相当于VUE的v-model语法糖:valuse=“message”, @input=“onInput”

class App extends React.Component {
    
    
  state = {
    
    
    inputValue: 'hello react'
  }

  handleChange = (e) => {
    
    
    this.setState({
    
    
      msg: e.target.value
    })
  }

  render() {
    
    
    return (
      <div>
        <input type="text" value={
    
    this.state.inputValue} onChange={
    
    this.handleChange}/>
      </div>
    )
  }
}

非受控组件-ref-表单元素（状态不可变，通过ref直接控制数据）

通过ref 的createRef()方法，控制DOM的方式来获取表单元素的值

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

import {
    
     createRef } from 'react'

class New extends Component {
    
    
    // 声明一个ref
  newRef = createRef()
  handleClick = () => {
    
    
    console.log(this.newRef.current.value)  // 控制dom的value
  }
  render() {
    
    
       // 赋值给当前dom
    return (
      <div>
        <input ref={
    
    this.newRef} />
        <button onClick={
    
    handleClick}>触发handleClick</button>
      </div>
    )
  }
}