当前位置: 首页 > article >正文

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

http://www.kler.cn/a/274560.html

相关文章:

  • 单调栈基础用法
  • 冯诺依曼架构与哈佛架构的对比与应用
  • C++进阶-2-STL
  • 智能座舱进阶-应用框架层-Handler分析
  • 【自动化】Python SeleniumUtil 工具 开启开发者模式 自动安装油猴用户脚本等
  • Linux网络基础--传输层Tcp协议(上) (详细版)
  • C#,图论与图算法,计算无向连通图中长度为n环的算法与源代码
  • 湖北省地质灾害分布数据 崩塌滑坡泥石流空间分布地质灾害详查等数据集
  • Spark-Scala语言实战(3)
  • Linux:Gitlab:16.9.2 创建用户及项目仓库基础操作(2)
  • xAI开发的一款巨大型语言模型(HLM)--Grok 1
  • Hive 使用 LIMIT 指定偏移量返回数据
  • 力扣--回溯算法51.N皇后
  • Stable Diffusion WebUI 生成参数:高清修复/高分辨率修复(Hires.fix)
  • web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child
  • 【AIGC调研系列】MetaGpt与AutoGpt相比有哪些优势和劣势
  • 微信小程序项目实战遇到的问题
  • 使用ES检索PDF等文档的全栈方案之前端demo(end)
  • Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?
  • Rust 中的 Vec<u8> 类型
  • 【2024.3.19练习】统计子矩阵
  • FFmpeg-- c++实现:音频流aac和视频流h264封装
  • 机器人离散化阻抗控制
  • 【源码&教程】基于GAN的动漫头像生成系统
  • Word为图表设置图注并在图表清单中自动生成
  • 解决由于历史原因解析tflite失败的问题