React Hooks & Typescript -表单不受控制？
React Hooks是React 16.8版本引入的一种新的特性，它允许我们在不编写类组件的情况下使用状态和其他React特性。而Typescript是一种静态类型检查的编程语言，它可以在开发过程中提供更好的类型安全性。
在React中，表单通常有两种状态：受控组件和非受控组件。受控组件是指表单元素的值由React组件的状态控制，而非受控组件是指表单元素的值由DOM自身管理。
当使用React Hooks和Typescript开发表单时，可以选择使用受控组件或非受控组件。受控组件通常更容易管理和验证表单数据，而非受控组件则更适合简单的表单场景。
对于受控组件，可以使用useState Hook来定义表单元素的状态，并使用onChange事件处理函数来更新状态。例如，可以使用useState来定义一个输入框的值：
import React, { useState } from 'react';
const MyForm: React.FC = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
};
return (
<input type="text" value={inputValue} onChange={handleChange} />
);
};对于非受控组件，可以使用useRef Hook来获取表单元素的引用，并在需要时读取其值。例如，可以使用useRef来获取一个输入框的值：
import React, { useRef } from 'react';
const MyForm: React.FC = () => {
const inputRef = useRef<HTMLInputElement>(null);
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const value = inputRef.current?.value;
// 处理表单提交逻辑
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
};需要注意的是，使用非受控组件时需要手动处理表单的提交逻辑。
React Hooks和Typescript可以很好地结合使用，通过使用类型注解和类型推断，可以提供更好的代码提示和类型安全性。此外，React Hooks还提供了其他有用的Hook，如useEffect、useContext等，可以进一步增强组件的功能。
腾讯云提供了云原生应用开发的解决方案，可以帮助开发者快速构建和部署云原生应用。具体可以参考腾讯云云原生应用开发服务的介绍：腾讯云云原生应用开发。
以上是关于React Hooks和Typescript在表单开发中的应用的介绍，希望对您有帮助。
相关·内容
1回答
响应TypeScript Cant更新自定义输入文本值
reactjs、typescript
我已经开发了使用react类型记录的编辑通知页面。我从数据库获得通知标题，并将该值设置为自定义输入组件，如下所示
let notificationTitle: string = "Notification Test"; // getting from db
<FormInputText
label={"Notification Title:"}
value={notificationTitle}
name={`notificationTitle1`}
required={false}
placeholde
浏览 19提问于2022-04-06得票数 0
回答已采纳
1回答
每当输入表单中的值被更改时，光标跳到末尾。
javascript、reactjs、typescript
每当我将光标放在数字中间时，假设是3|3000，然后按backspace或delete键，光标跳到后面。我认为这是因为我将value设置为displayValue，并且由于displayValue是一种状态，每当displayValue更改值时，输入重新呈现，因此光标移回。我知道简单的解决方案是设置value={value}，但是对于这个特定的输入，我需要使用状态displayValue，所以我需要使用替代解决方案。是否有一种方法可以使光标保持在它的自然位置，即使通过重呈现？
import React, { useState, useRef, useEffect } from "rea
浏览 3提问于2022-10-19得票数 0
2回答
如何在不定义值支柱的情况下访问TextInput中的文本？
reactjs、typescript、react-native、react-hooks
--我想创建一个表单，而不使用useState来控制输入，因为我只需要当用户按下按钮时才需要输入值，所以我当时只想访问/知道输入值。我还认为，在每次输入文本之后更新屏幕并不是一个好做法。
让我们假设我们有以下结构：
const Home = () => {
// const [inputValue, setInputValue] = useState(""); => I want to avoid that
const inputRef = useRef<TextInput>(null);
return (
<View>
浏览 3提问于2021-10-18得票数 1
回答已采纳
3回答
如何用TextInput获得useRef值？
react-native
我试图通过以下方法获得TextInput的价值
useRef
但它给出了不明确的定义。这是我的密码：
const inputRef = useRef(null);
<TextInput
ref={inputRef}
value={'test'}
editable={false}
style={styles.InputStyle}
/>
console.log(inputRef.current.value) ---> gives undefined
浏览 6提问于2021-01-25得票数 2
2回答
我可以使用useRef钩子而不是onChange事件来更新状态吗？
reactjs、state、onchange、use-ref
在寻找避免在输入字段每次更改后呈现组件的方法时，我遇到了一个建议，即使用useRef而不是onChange事件进行状态更新。在简单的组件中，这似乎是可以的，但由于我是初学者，我不知道这在更复杂的应用程序中是一个很好的方法。壳牌，我继续这种方式，还是我应该坚持onChange事件？为了解决这个难题，我进行了大量的探索，但没有找到明确的答案。这方面的任何建议都将受到更多的欢迎。
这是它在组件中的样子：
import React, { useRef, useState } from 'react';
import axios from 'axios';
const
浏览 4提问于2021-02-11得票数 1
回答已采纳
1回答
Ref对象可能是未定义的TypeScript反应。
reactjs、typescript
我有一个组件，它使用钩子将输入值设置为组件状态。当输入值长度超过0字符时，我想添加一个类，但是我遇到了一个问题，TypeScript说我的引用可能是未定义的。
即使我检查ref是否存在于包装代码以添加类的条件中，也无法消除此错误。我不确定这件事的解决办法。
错误： Object is possibly 'undefined' on inputValue.current.classList.add(inputHasContentClassName);
import React, { useState, useEffect, useRef } from 'react'
浏览 1提问于2020-01-24得票数 20
回答已采纳
1回答
React在每次输入更改时向ref添加一个事件侦听器
reactjs、react-hooks、dom-events、addeventlistener、react-functional-component
以下列部分为例：
function MyComponent() {
const [ inputValue, setInputValue ] = useState( '' );
const [ submittedValue, setSubmittedValue ] = useState( '' );
const inputRef = useRef<HTMLInputElement>( null );
useEffect( () => {
const inputElement = inputRef.
浏览 3提问于2022-01-25得票数 2
回答已采纳
1回答
手动设置为当前时，useRef()钩子使用哪种类型的脚本？
reactjs、typescript、react-hooks
如何通过Typescript将React引用用作可变实例？current属性的类型似乎是只读的。 我正在使用React + Typescript开发一个库，它可以与React未呈现的输入字段进行交互。我想捕获对HTML元素的引用，然后将React事件绑定到它。 const inputRef = useRef<HTMLInputElement>();
const { elementId, handler } = props;
// Bind change handler on mount/ unmount
useEffect(() => {
inpu
浏览 15提问于2019-09-20得票数 95
回答已采纳
1回答
通过对象数组进行过滤
javascript、reactjs、typescript
我想要过滤我的对象数组。有人能解释一下为什么第一个例子行不通吗？当我输入一个输入时，它只会删除我的对象。然而，第二个例子很好。做过滤的最好方法是什么？
第一个示例(不起作用)：
const [data, setData] = useState(JSON.parse(localStorage.getItem("notes") ?? "[]"));
const [inputValue, setInputValue] = useState("");
const handleNoteListFilter = (e: React.Cha
浏览 7提问于2022-11-26得票数 0
2回答
有什么方法可以把裁判和反应组合在一起吗？
javascript、reactjs
这里是用例。我希望用户能够将ref传递给组件。但是，我还必须在内部访问相同的引用。
import React, { useRef, forwardRef } from 'react';
import useId from 'hooks/useId';
interface Props extends React.HTMLProps<HTMLInputElement> {
readonly label: string;
}
export default forwardRef<HTMLInputElement, Props>(({ la
浏览 3提问于2019-09-19得票数 0
1回答
如何在不使用状态的情况下显示ref变量？
reactjs
我想知道是否有任何方法可以直接显示ref中变量的值而不使用状态，所有的示例都处理“警报”并且警报工作得很好，我正在试图找到一种方法来立即显示它。所以，我只是想在这里显示"name“的值。为x变量命名道歉。
我想这对DOM不友好吧。
谢谢。
const UncontrolledExample = () => {
const name = useRef();
let x = '';
const showValue = (e) => {
e.preventDefault();
alert(name.current.value);
浏览 1提问于2021-02-20得票数 0
回答已采纳
2回答
无法使用typescript在react-redux中分派操作
reactjs、typescript、redux
我正在开发一个使用react redux typescript的TODO应用程序。我无法调度操作。我对redux还是个新手，所以卡在里面了。我创建了一个事件onclick handleSubmitButton，然后它抛出了调度错误。有人能帮我一下吗？ AddToDo.tsx const AddToDo: React.FC = () => {
const [inputValue, setInputValue] = useState<string>("");
const handleSubmitButton = (e: React.MouseE
浏览 27提问于2020-09-14得票数 0
1回答
在React中，使用TypeScript，如何使用RefForwardingComponent和forwardRef将引用传递给自定义组件？
reactjs、typescript、react-hooks
我正在尝试将一个参考文件传递给一个自定义组件(这样我就可以将焦点设置到组件上)。
但我一直在犯这个错误
const RefComp: React.RefForwardingComponent<HTMLInputElement, Props>
Type '{ value: string; onChange: Dispatch<SetStateAction<string>>; ref: MutableRefObject<HTMLInputElement | undefined>; }'
is not assignable to typ
浏览 3提问于2020-02-04得票数 5
回答已采纳
1回答
将属性子集传输到Typescript React中的子组件
reactjs、typescript
我创建了一个风格化的InputText组件，我在表单中使用它。我不想重复我的props定义中所有可能的输入属性，所以我扩展了React属性。 import React, { useState, LegacyRef } from "react";
import Container, { ContainerProps } from "./Container";
export type InputTextProps = ContainerProps &
React.InputHTMLAttributes<HTMLInputElement>
浏览 13提问于2020-05-03得票数 2
2回答
使用React form Controller组件时如何设置焦点
reactjs、react-hook-form
我有一个CustomTextBox组件，它封装在react钩子形式的Controller组件中，所有组件都工作得很好，包括验证和使用ErrorMessage组件显示错误消息。
当表单中有错误时，剩下的唯一要做的事情就是在字段上setFocus。这是我的第一个TypeScript项目，我很难找到与我类似的解决方案。
我尝试了useRef，但这只会给出编译时错误=>“属性'ref‘在’IntrinsicAttributes‘上不存在”。
下面是我的自定义组件。请大家帮忙，我们会很感激的。提前感谢
import React, { useRef } from "react"
浏览 15提问于2022-09-23得票数 1
回答已采纳
2回答
如何使用React在另一个组件中获取表单的输入值
reactjs、react-native、api、axios、react-hooks
我用过Axios和Reach钩子。有没有任何方法从form.js文件中获取更新的输入值，以便我可以使用它来更新ApiData.js文件中的axios.get链接？当用户键入值时，我希望获取该值并在ApiData.js文件中使用该值，以便可以在axios.get中更新该值。通过将form.js文件中的form.js传递给一个函数，然后尝试在ApiData.js文件中访问它，我尝试了很多方法来做到这一点。什么都没用。我是个初学者。所以如果你对这个问题不清楚，请告诉我。提前感谢
这是form.js文件
import React, {useState} from 'react';
f
浏览 2提问于2021-05-11得票数 2
回答已采纳
1回答
使用验证js搜索组件呈现问题
javascript、reactjs、typescript、react-hooks
我有带有验证js的搜索组件。
问题:当我的输入第一次被犯规时，验证和请求无效，但是当我失去了输入的焦点，然后再点击它，再试一次，在没有验证的情况下搜索工作。
interface IProps {
onSearchChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const Search: React.FC<IProps> = ({ onSearchChange }) => {
const inputRef = useRef<HTMLInputElement
浏览 4提问于2022-07-23得票数 1
1回答
如何在没有Redux的情况下在不同的组件中绑定状态和函数？
javascript、reactjs
我有一个主页，它有findUser()和inputValue值，我想创建一个静态的应用程序头，但是它有一个input that需要findUser()和inputValue来使用它，我如何正确地传递它们(没有Redux就可以做到这一点?)
主页：
const githubPageref = useRef(1);
const reposRef = useRef([]);
const [userNickName, setUserNickName] = useState('');
const [userProfile, setUserProfile] = useState
浏览 3提问于2022-05-13得票数 1
回答已采纳
1回答
React:在useEffect()中呈现变量集总是落后一步
reactjs、react-native、react-hooks、use-effect
在使用React Native开发Android应用程序时，我偶然发现了一个奇怪的问题。
有一个SearchBar可以在数据库上执行名称搜索。结果应该被渲染。在下面的代码中，您可以看到，在使用useRef()：let returnValue = useRef('No results');在外部定义变量之后，我在useEffect()-Hook中使用结果设置了该变量
所以我希望如果我输入一个名字，比如"Mike"，数据库结果(存储在returnValue.current中)将在提交后立即呈现。
但不是。
实际上，结果"Mike“是在我再次打开搜索栏并删除最
浏览 10提问于2020-02-10得票数 0
回答已采纳
1回答
在表单中使用字符串数组
reactjs、react-hook-form
在我正在制作的表单中，在表单中创建的材料应该具有可以添加的多个宽度选项。这意味着我将有一个文本输入，用户可以在其中添加一个选项，当添加该选项时，应该将其添加到React widthOptions数组中，而不使用常规的react状态。一个人会怎么做？如何将项添加到整个React窗体状态，我只看到与属性对应的一个输入字段的选项。
这就是我如何使用常规的反应状态来完成的。
import { TrashIcon } from "@heroicons/react/24/outline";
import React, { useRef, useState } from "react
浏览 5提问于2022-11-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
