react 中 获取表单元素的值的两种思路

  • Post author:
  • Post category:其他



目录


非受控组件-ref


ref的使用格式


受控组件


拓展:常见的受控组件


react 中 如何获取表单元素(例如输入框)?

初始代码

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>如何获取input中的值</h1>
        <p><input type="text" /></p>
        <button>点击按钮</button>
      </div>
    )
  }
}

有两种思路:

  1. 直接找到表单元素进行dom操作 –>

    非受控组件

  2. 将表单元素值与react的state绑定到一起,把用户的修改同步到state中。让组件受到react的控制–>

    受控组件

非受控组件-ref

借助于ref,使用原生DOM的方式来获取表单元素的值

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)

内容

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

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

  • 此时,需要用到一个新的概念:ref

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

示例代码

// 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>
    )
  }
}

注意

使用受控组件的方式处理表单元素后,状态的值就是表单元素的值。

即:想要操作表单元素的值,只需要操作对应的状态即可

拓展:常见的受控组件

常见的受控组件的在react中的使用


文本框,文本域,下拉框,复选框,单选框

不同类型的表单元素进行受控处理时的格式是不同的:

  1. 文本框、文本域、下拉框:value属性 + onChange事件

  2. 复选框: checked属性 + onChange事件

  3. 单选按钮组:checked属性 + onChange事件

示例代码

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

class App extends React.Component {
  state = {
    username: '',
    desc: '',
    city: '2',
    isSingle: true,
    gender: '男'
  }

  handleName = (e) => {
    this.setState({
      username: e.target.value
    })
  }

  handleDesc = (e) => {
    this.setState({
      desc: e.target.value
    })
  }

  handleCity = (e) => {
    this.setState({
      city: e.target.value
    })
  }

  handleSingle = (e) => {
    this.setState({
      isSingle: e.target.checked
    })
  }

  hGender = (e) => {
    this.setState({
      gender: e.target.value
    })
  }

  render () {
    return (
      <div>
        姓名:<input
          type="text"
          value={this.state.username}
          onChange={this.handleName}
        />
        <br />
        描述:<textarea value={this.state.desc} onChange={this.handleDesc} />
        <br />
        城市:<select value={this.state.city} onChange={this.handleCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身:<input
          type="checkbox"
          checked={this.state.isSingle}
          onChange={this.handleSingle}
        />
        <br />
        <input
          type="radio"
          name="gender"
          value="男"
          checked={this.state.gender === '男'}
          onChange={this.hGender}
        />{' '}
        男
        <input
          type="radio"
          name="gender"
          value="女"
          checked={this.state.gender === '女'}
          onChange={this.hGender}
        />{' '}
        女
      </div>
    )
  }
}

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



版权声明:本文为weixin_58726419原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。