正文从这开始~

总览

在React中,通过表单提交获得input的值:

  1. state变量中存储输入控件的值。
  2. form表单上设置onSubmit属性。
  3. handleSubmit函数中访问输入控件的值。
import {useState} from 'react';

const App = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState(''); const handleSubmit = event => {
console.log('handleSubmit ran');
event.preventDefault(); // ️ prevent page refresh // ️ access input values here
console.log('firstName ️', firstName);
console.log('lastName ️', lastName); // ️ clear all input values in the form
setFirstName('');
setLastName('');
}; return (
<div>
<form onSubmit={handleSubmit}>
<input
id="first_name"
name="first_name"
type="text"
onChange={event => setFirstName(event.target.value)}
value={firstName}
/>
<input
id="last_name"
name="last_name"
type="text"
value={lastName}
onChange={event => setLastName(event.target.value)}
/> <button type="submit">Submit form</button>
</form>
</div>
);
}; export default App;

受控控件

我们使用useState钩子来跟踪输入控件的值。我们在控件上设置onChange属性,因此当控件上的值更新时,我们更新相应的state变量。

form表单上的button元素具有submit类型,所以每当按钮被点击时,form表单上的submit事件就会被触发。

form表单被提交时,我们在handleSubmit函数中使用event.preventDefault() ,以此来阻止form表单页面刷新。

为了获得表单提交时的输入值,我们只需访问state变量。如果你想在表单提交后清空控件值,可以设置state变量为空字符串。

不受控控件

类似地,可以使用不受控制的输入控件。

  1. 在每个输入控件上设置ref属性。
  2. form元素上设置onSubmit属性。
  3. ref对象上访问input的值,比如,ref.current.value
import {useRef} from 'react';

const App = () => {
const firstRef = useRef(null);
const lastRef = useRef(null); const handleSubmit = event => {
console.log('handleSubmit ran');
event.preventDefault(); // ️ prevent page refresh // ️ access input values here
console.log('first ️', firstRef.current.value);
console.log('last ️', lastRef.current.value); // ️ clear all input values in the form
event.target.reset();
}; return (
<div>
<form onSubmit={handleSubmit}>
<input
ref={firstRef}
id="first_name"
name="first_name"
type="text"
/>
<input
ref={lastRef}
id="last_name"
name="last_name"
type="text"
/> <button type="submit">Submit form</button>
</form>
</div>
);
}; export default App;

上述示例使用了不受控制的输入控件。需要注意的是,输入控件没有onChange属性或者值设置。

你可以用defaultValue属性给一个不受控制的input传递一个初始值。然而,这并不是必须的,如果你不想设置初始值,你可以省略这个属性。

当使用不受控制的输入控件时,我们使用ref来访问input元素。useRef()钩子可以被传递一个初始值作为参数。该钩子返回一个可变的ref对象,其.current属性被初始化为传递的参数。

需要注意的是,我们必须访问ref对象的current属性,以获得对我们设置ref属性的input元素的访问。

当我们为元素传递ref属性时,比如说,<input ref={myRef} /> ,React将ref对象的.current属性设置为相应的DOM节点。

useRef钩子创建了一个普通的JavaScript对象,但在每次渲染时都给你相同的ref对象。换句话说,它几乎是一个带有.current属性的记忆化对象值。

需要注意的是,当你改变refcurrent属性的值时,不会导致重新渲染。每当用户提交表单时,不受控制的input的值会被打印。

你不应该在一个不受控制的input(一个没有onChange处理函数的输入控件)上设置value属性,因为这将使输入控件不可变,你将无法在其中键入。

reset

如果你想在表单提交后清除不受控制的input值,你可以使用reset()方法。

reset()方法还原表单元素的默认值。不管你的表单有多少不受控制的输入控件,只要调用reset()方法就可以清除所有的字段。

当表单被提交时,获取输入控件值的另一种方法是,使用name属性访问表单元素。

const App = () => {
const handleSubmit = event => {
console.log('handleSubmit ran');
event.preventDefault(); // ️ access input values using name prop
console.log('first ️', event.target.first_name.value);
console.log('second ️', event.target.last_name.value); // ️ clear all input values in the form
event.target.reset();
}; return (
<div>
<form onSubmit={handleSubmit}>
<input
id="first_name"
name="first_name"
type="text"
/>
<input
id="last_name"
name="last_name"
type="text"
/> <button type="submit">Submit form</button>
</form>
</div>
);
}; export default App;

event对象上的target属性引用form元素。

你不会经常看到这种方法,如果你不想在state中存储输入控件的值或使用ref对象,就可以使用这种方法。这主要是一种快速和不整洁的解决方案。

最常用的方法是将input值存储在state变量中。从任何地方访问state变量的能力允许高度可定制的表单。

React技巧之表单提交获取input值的更多相关文章

  1. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  2. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  3. amazeUI表单提交验证--input框required

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. 表单提交checkbox的值

    问题:怎么在表单提交的时候提交多个多选框CheckBox的值? 解决方式:在CheckBox的name属性名后添加[]; 例: <input type="checkbox" ...

  5. dedecms自定义表单提交获取时间跟ip地址

    相信大家在用织梦做网站的时候都用过自定义表单做留言,但是如何查看客户什么时间填写的表单,和客户的IP地址呢? 我在网上找了很多JS文件,但太繁琐了,后来我注意到一个细节,每次我登陆后台,织梦系统都会记 ...

  6. request.getParameterMap() 获取表单提交的键值对 并且 也能获取动态表单的key

    Map<String,String[]> map = request.getParameterMap();Set<String> keys = map.keySet(); 获取 ...

  7. 处理form表单提交后返回值的处理办法【html5】

    同事朋友ajax,最近在弄公司业务电话机,自主搭建,买的设备. 其中最主要功能是前端发起呼叫,通过浏览器触发设备进行呼叫功能,走后台呼叫还不行. 需求是这样的: 前端给设备ip发送特定的一段xml信息 ...

  8. select 通过表单提交获取select中的值

    <select class="txt" name="choice">       <option value="name" ...

  9. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...

随机推荐

  1. Blazor WebAssembly 渐进式 Web 应用程序 (PWA) 使用 LocalStorage 离线处理数据

    原文链接:https://www.cnblogs.com/densen2014/p/16133343.html Window.localStorage 只读的localStorage 属性允许你访问一 ...

  2. 论文解读(SelfGNN)《Self-supervised Graph Neural Networks without explicit negative sampling》

    论文信息 论文标题:Self-supervised Graph Neural Networks without explicit negative sampling论文作者:Zekarias T. K ...

  3. 2021.08.05 P2168 荷马史诗(哈夫曼树模板)

    2021.08.05 P2168 荷马史诗(哈夫曼树模板) [P2168 NOI2015] 荷马史诗 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.k叉哈夫曼树如果子结 ...

  4. 初始celery

    使用celery执行异步任务 下载celery,redis pip3 install celery#在这里我使用的是celery==4.2.2#当celery版本过低的话celery配置可能会略有不同 ...

  5. 广度优先搜索 BFS 学习笔记

    广度优先搜索 BFS 学习笔记 引入 广搜是图论中的基础算法之一,属于一种盲目搜寻方法. 广搜需要使用队列来实现,分以下几步: 将起点插入队尾: 取队首 \(u\),如果 $u\to v $ 有一条路 ...

  6. js实现图片懒加载原理

    原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...

  7. Bugku CTF练习题---社工---密码

    Bugku CTF练习题---社工---密码 flag:KEY{zs19970315} 解题步骤: 1.观察题目,思考题目要求 2.发现其中有姓名和生日这两个信息.从社工角度出发,感觉可能是名字+生日 ...

  8. k8s入门之ConfigMap(九)

    ConfigMap是k8s的配置管理工具,通常用来保存明文的配置信息,以key-value形式传递配置. 一.使用命令创建ConfigMap对象 1.通过--from-literal参数创建 kube ...

  9. 引入『客户端缓存』,Redis6算是把缓存玩明白了…

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是没更新就是在家忙着带娃的Hydra. 在前面介绍两级缓存的文章中,我们总共给出了4种实现方案,在项目中整合了本地缓存Caffe ...

  10. Glance基础服务运维

    @ 目录 Glance镜像服务介绍 创建镜像 查看镜像 修改镜像 删除镜像 Glance镜像服务介绍 Glance是OpenStack镜像服务,用来注册.登陆和检索虚拟机镜像.Glance服务提供了一 ...