React获取form表单值的N种方式

Ref模式(非受控模式)

非钩子模式
javascript 复制代码
1.createRef()方式
js:
userNameEl=createRef()
<input type="text" name="userName" ref={this.userNameEl} />
获取值的方式:
this.userNameEl.current.value

2.refs(废弃)
js:
const { userName } = this.refs;

<input type="text" name="userName" ref="userName" />

3.回调函数方式(不推荐)
js:
this.userNameRef.value
<input type="text" name="userName" ref={(el) => (this.userNameRef = el)} />
钩子函数模式
javascript 复制代码
import React, { useRef, useEffect } from 'react';
function MyComponent() {
  const myRef = useRef();
  useEffect(() => {
    myRef.current.focus();
  }, []);
  return <input ref={myRef} />;
}

非ref模式(受控模式)

非钩子模式
javascript 复制代码
import { Component } from "react";
export default class TestValue extends Component {
  state = {
    userName: null,
  };
  inputChange = (e) => {
    this.setState({ userName: e.target.value });
  };
  getInputValue = () => {
    console.log(this.state.userName);
  };
  render() {
    return (
      <div>
        <input type="text" name="userName" onChange={this.inputChange} />
        <button onClick={this.getInputValue}>TestValue</button>
      </div>
    );
  }
}
钩子模式
javascript 复制代码
import { useState } from "react";
export default function TestValue() {
  //函数式组件使用
  const [userName, setUserName] = useState(null);

  function inputChange(e) {
    setUserName(e.target.value);
  }
  function getInputValue() {
    console.log(userName);
  }
  return (
    <div>
      <input type="text" name="userName" onChange={inputChange} />
      <button onClick={getInputValue}>TestValue</button>
    </div>
  );
}

总结

ref模式和非ref模式的区别

ref模式是在类组件或使用Hooks的函数组件中创建并使用ref的方式,可以用来访问和控制DOM节点或其他组件实例。非ref模式主要是指无状态组件,它们不支持ref。

受控组件和非受控组件的区别

React受控组件和非受控组件之间的最大区别是组件的值是由React状态控制还是由DOM节点控制。

相关推荐
风无雨7 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl12 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js