react js 处理表单( form )的2个例子

简介: react js 处理表单( form )的2个例子

起因, 目的:
表单其实,有点复杂,因为涉及事件,event.
不熟悉的代码,还是尽量手写,不然的话,AI 生成的东西,自己看不懂。

例1 普通, 直接的方法
一个输入框,一个处理函数。

import { useState } from "react";

// 使用 form, 表单
function App() {
const [username, setUsername] = useState("friend!");
const [password, setPassword] = useState("123!");

function handleUsernameChange(event) {

// 理解 event.target.value
// target 是 input 标签,
// value  是用户输入的值
// 同理,还可以打印出其他属性,
// 如 event.target.name, event.target.type 等
console.log("Username changed: ", event.target.value);
// console.log("event.target.name: ", event.target.name);
// console.log("event.target.type: ", event.target.type);

}

function handlePasswordChange(event) {
console.log("Password changed: ", event.target.value);
}

return (





);
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

onChange 这个函数确实很有用,用户调试代码很不错。

例2 用一个函数来处理表单
import { useState } from "react";

// 使用 form, 表单
function App() {

// 用一个 state 来处理整个表单。
const [formData, setFormData] = useState({username: "", password: ""});

console.log("formData changed: ", formData);

function handleChange(event) {
setFormData(prevFormData => {

  return {
    ...prevFormData,  // 复制 prevFormData 对象

    // 这里如果不加 [] 会报错。
    // [event.target.name] 表示动态计算出这个字段的名字, 作为对象的 key
    [event.target.name]: event.target.value  // 更新对应字段
  }

})

}

// 如果要使用 一个函数来处理表单,每个字段都加上 name 属性
return (





);
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

结论 + todo
走过路过,支持一下啊。

相关文章
|
12天前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
21天前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
25 9
|
2月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
33 0
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
31 0
|
2月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
47 0
|
2月前
|
容器 Kubernetes Docker
云原生JSF:在Kubernetes的星辰大海中,让JSF应用乘风破浪!
【8月更文挑战第31天】在本指南中,您将学会如何在Kubernetes上部署JavaServer Faces (JSF)应用,享受容器化带来的灵活性与可扩展性。文章详细介绍了从构建Docker镜像到配置Kubernetes部署全流程,涵盖Dockerfile编写、Kubernetes资源配置及应用验证。通过这些步骤,您的JSF应用将充分利用Kubernetes的优势,实现自动化管理和高效运行,开启Java Web开发的新篇章。
47 0
|
2月前
|
前端开发 JavaScript API
掌握React表单管理的高级技巧:探索Hooks和Context API如何协同工作以简化状态管理与组件通信
【8月更文挑战第31天】在React中管理复杂的表单状态曾是一大挑战,传统上我们可能会依赖如Redux等状态管理库。然而,React Hooks和Context API的引入提供了一种更简洁高效的解决方案。本文将详细介绍如何利用Hooks和Context API来优化React应用中的表单状态管理,通过自定义Hook `useForm` 和 `FormContext` 实现状态的轻松共享与更新,使代码更清晰且易于维护,为开发者带来更高效的开发体验。
32 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
33 0