如何在React中使用'useState‘来更改<input>的值？
在React中使用useState来更改<input>的值，可以按照以下步骤进行操作：
- 首先，在React组件中引入useState钩子函数：
import React, { useState } from 'react';- 在组件函数体内部，使用useState来声明一个状态变量和一个更新该变量的函数：
const [inputValue, setInputValue] = useState('');这里的inputValue是状态变量的名称，可以根据实际情况进行命名，而setInputValue是更新该变量的函数。
- 在<input>元素中，将value属性绑定到状态变量inputValue，并将onChange事件处理函数绑定到一个自定义的函数，用于更新状态变量的值：
<input type="text" value={inputValue} onChange={handleInputChange} />这里的handleInputChange是自定义的函数，用于处理输入框的变化。
- 在组件函数体内部，定义handleInputChange函数，用于更新状态变量的值：
const handleInputChange = (event) => {
setInputValue(event.target.value);
};这里的event.target.value表示输入框当前的值，通过调用setInputValue函数来更新状态变量的值。
完整的React组件示例代码如下：
import React, { useState } from 'react';
const MyComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<p>输入的值为：{inputValue}</p>
</div>
);
};
export default MyComponent;这样，当用户在<input>中输入内容时，useState会自动更新inputValue的值，并且重新渲染组件，显示最新的输入值。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在尝试创建表单验证，使用react，并且我得到的错误无法正确地读取包含。使用React的类组件很好，但是在函数组件中，它会抛出一个错误。
我正在尝试进行验证-检查最终用户在表单中包含的数据。这是我的代码：
import React,{useState} from 'react';
export default function Main(){
const [name, setname]= useState()
const [email, setemail]= useState()
const [password, setpassword]= use
浏览 1提问于2021-10-29得票数 1
6回答
我正在尝试编写一个简单的程序，允许您在输入字段中输入您的名字和姓氏，这样您就可以根据您的名字得到问候。但我不能让它起作用。
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [Savedinput, setSavedinput] = useState({Fname:' ' , Lastname:''} );
const ChangeFirst = (e) => {
浏览 3提问于2021-07-25得票数 0
回答已采纳
我有一个应用程序：
import React, { useState } from "react";
const App = () => {
const [cars, setCars] = useState([]);
const [car, setCar] = useState({
name: "",
color: ""
});
const handleChange = e => {
setCar({
...car,
[e.target.name]: e.targe
浏览 7提问于2020-08-09得票数 0
我得到了：
TypeError:无法读取null的属性值
但在console.log中，我从useEffect获得了正确的信息。
我怎么才能修好它？
const { useRef, useEffect, useState } = React
const App = () => {
const inputRef = useRef(null);
const [inputValue, setInputValue] = useState('Default text');
useEffect(() => {
console.log('
浏览 3提问于2020-11-24得票数 0
2回答
响应输入组件--它总是落后一步
、、、、
我遇到了一个小问题，你能帮忙吗？我试图制作一个输入组件，但是当我在输入中输入一些东西时，它总是落后一步。这是正确的方式吗？或者是否有某种方法来生成输入组件？
我是Input.js
import React, { useState } from 'react';
function Input(props) {
const [value, setValue] = useState('');
const { type, className, placeholder } = props;
let handleChange = (e) => {
浏览 3提问于2021-09-15得票数 1
回答已采纳
我使用useState钩子更新表单中输入的值。这是我在useState钩子中使用的对象：
const [values, setValues ] = useState({
name: '',
lastname: '',
email: '',
confirmEmail: '',
message: ''
});
然后，我有一个带有输入的数组，在那里输入id和其他字段：
const inputs = [
{
id: Math.random(),
n
浏览 6提问于2022-08-24得票数 0
回答已采纳
1回答
我想在另一个组件中从秒表中同时显示formatTime，以便当我从输入中保存值时，秒表中的当前时间将保存并显示在列表上？有人能帮我吗?我是新手吗？问题是，我不知道如何获得formatTime的值，就像在返回的Kello.js中那样，只调用它，因为它在一个不同的组件中。
Kello.js
import React, {useState,useRef} from 'react';
const Kello = () => {
const [timer,setTimer] = useState(0)
const [isActive, setIsActiv
浏览 0提问于2021-01-04得票数 2
回答已采纳
2回答
如何更改TextInput元素内的文本输入颜色，以响应本机元素，我尝试将color="red"传递给组件，但由于某种原因，它无法工作。
下面是我使用的代码：
import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vec
浏览 1提问于2020-05-20得票数 1
回答已采纳
我是个新手，我不清楚input标签中onChange和value之间的关系。如果onChange使用带有空value useState更新了上面声明的任何变量，则会导致错误。为什么会发生这种情况？我认为示例代码清楚地说明了我的问题，所以这里有一个示例。
from React, { useState } import 'react'
function example() {
const [example,setExample] = useState('');
return (
<input type="text"
浏览 0提问于2020-08-24得票数 0
3回答
我已经创建了一个表单，其中有多个输入字段。我希望将这些多个输入字段的数据存储在一个useState变量中。以下是守则：
import React, { useState } from "react";
const Form = () => {
const [data, setData] = useState({
firstName: "",
lastName: "",
phone: "",
zipCode: "",
age: "",
role
浏览 2提问于2022-08-31得票数 0
我不太明白如何在handleSubmit中打字？
"EventTarget“类型中不存在”密码“属性。"email“属性在EventTarget类型中不存在。
import { FormEvent, useState } from "react"
import { NavLink } from "react-router-dom"
import { useAppDispatch, useAppSelector } from "../../../hooks"
import { loginThunkCreator } from
浏览 2提问于2022-09-20得票数 -1
1回答
我有React函数组件Input --它是一个简单的input字段，只需要一个名为epoch的prop，以毫秒为单位表示epoch的值。在组件内部，我使用moment js来格式化这次是HH:mm (hour:min)格式，我还使用Input组件中的useState设置input值，同时用户更新我需要用复杂算法检查的输入，并且需要附加+/-和数字。
Input.jsx
import React, {useState, } from 'react'
import moment from 'moment'
function Input({epoch}){
co
浏览 2提问于2020-01-14得票数 1
我有以下组件结构： ? 这是输入组件。当onChange事件被触发时，将调用验证函数。 import React, {FC, useState} from 'react';
interface InputProps {
config : {}
}
/**
* @param config
* @constructor
*/
const Input: FC<InputProps> = ({config}) => {
/**
* @param inputValue
*/
const validate:
浏览 54提问于2021-10-22得票数 0
回答已采纳
2回答
我正在尝试使用socket.io来练习React.js，所以我试图在两个客户机之间发送消息，但是我很难显示这些消息。我想展示过去发送的信息。现在我想把它作为一个数组来做，因为一个状态不起作用。当控制台记录数组时，它会出现在控制台中，但从不呈现出来。
import { useEffect, useState } from "react";
import io from "socket.io-client";
import "./App.css";
let socket;
const CONNECTION_PORT = "localhost
浏览 2提问于2021-10-04得票数 0
回答已采纳
我试图将输入状态存储到数组状态。但是，当我将useState函数参数传递给子组件时，它说
Cannot invoke an object which is possibly 'undefined'
父级：
const App:React.FC = () => {
const [collection, setCollection] = useState([])
return (
<div>
<Input setcollection={setCollection} />
</div>
)
}
输入部分(子部分)
in
浏览 6提问于2022-08-17得票数 0
请帮助我在这里做些什么来增加两个数字。当我单击addClick函数时，它并不是在添加。当我键入2和2时，它显示的是22而不是4。请帮助我在这里做什么。我是新来的。
App.jsx:
import React, {useState} from 'react';
function App(){
const [number1, setNumber1] = useState('');
const [number2, setNumber2] = useState('');
const [headingText, setHeading] =
浏览 10提问于2022-04-26得票数 1
回答已采纳
我试图在我的React应用程序中实现一个范围滑块，但当我输入代码时，滑块根本不起作用？ 它不会左右拖动。单击它也不会移动它。不过，如果我在codepen上使用完全相同的代码，滑块完全可以正常工作。 我试着研究过这个问题，但我找不到明确的答案。有人知道哪里会出问题吗？ 有问题的代码： <input
type="range"
min="1"
max="100"
value="50"
class="sl
浏览 22提问于2021-01-06得票数 1
我试图在react中获取这个API数据集。我希望允许用户使用id从API中搜索。每当用户单击搜索按钮时，我都想更改搜索按钮的颜色。在用户输入id并单击search按钮后，我希望获取数据集并将其显示在li列表中，然后显示id、引号和年份。这是我现在的代码，但它不起作用。
import "mvp.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Input } from "semantic-ui-react
浏览 2提问于2022-10-28得票数 -2
我得到这个错误，而更新的isSeller选项，它是为管理工作，但不是卖方。
警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制的转换为受控的(反之亦然)。决定在组件的生命周期中使用受控的还是不受控制的输入元素。
以下是我的代码：
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import { useDispatch, useSelector } from 'reac
浏览 7提问于2022-03-16得票数 0
3回答
钩不使状态处于反应状态
、、、
在下面的代码中，下面所示的钩子不会改变变量newName的状态。
import React, { useState } from 'react'
const App = () => {
const [ persons, setPersons] = useState([
{ name: 'Arto Hellas' }
])
const [ newName, setNewName ] = useState('')
const textChangeHandler = (event)=>{
浏览 1提问于2019-12-22得票数 1
我只是想弄清楚如何做我的待办事项列表，目前正在尝试添加包含文本输入元素的元素。
这个问题出现在下面的剪辑中：
import { useState } from "react"
function App() {
const [inputVal, setInputVal] = useState('')
const [tasks, setTasks] = useState([])
console.log(inputVal);
return <>
<Input valor = {setInputVal} inputVal={
浏览 3提问于2022-02-20得票数 0
回答已采纳
1回答
这个组件甚至不会更新这些道具。支柱row是一个对象。console.log("row", row")确实能工作。并得到正确的数据同时也是console.log("Data", data)
import React, {useState, useEffect} from "react";
const Form = ({row}) => {
const [data, setData] = useState(row);
console.log("row", row); //consoleLog1
useE
浏览 2提问于2021-10-09得票数 0
回答已采纳
2回答
我有一个搜索栏组件和一个目录组件。Catalog组件包含不同的卡片。根据在搜索栏组件的输入字段中键入的内容，我希望呈现不同的卡片。
为此，我需要能够将输入字段的值导入Catalog组件，在这个组件中，输入字段被传递到一个处理所有其余工作的搜索函数中。
我能够将值导入到Catalog组件中，但不幸的是，我不知道如何判断导入的值是否已更改，以便再次搜索？
我已经找到了一些方法在类中这样做，但我想用钩子代替。我对"useEffect“做了一些实验，但没有成功。
谢谢你的帮助!
这是我在搜索栏组件中的代码：
import React, { useState } from 'react&
浏览 3提问于2020-08-06得票数 1
回答已采纳
6回答
我正试图从输入字段中获得当前值，但单击onclick后，我将获得大比目鱼的预值。这是我的密码
import { React, useState } from "react";
const CompoundIntrest = () => {
const [capitalValue, setcapitalValue] = useState(1000);
const ChangeCapital = () => {
setcapitalValue(capitalValue - 100);
};
const Calculate = () =&
浏览 9提问于2022-05-28得票数 2
我正在使用useState钩子更新数组。此数组呈现输入列表。 这段代码确实正确地更新了useState钩子，但它在每次按键后将焦点从输入中移除。为什么会发生这种情况?我如何修复它？ import React, { useState } from "react";
const Todos = () => {
const [todos, setTodos] = useState(["Read book", "Tidy room"]);
function update(index: number, event: React.
浏览 20提问于2019-06-24得票数 1
回答已采纳
我用的是第17.0.1反应。我想不出以下几点：
如果按钮被多次单击，即使id保持为unchanged.Also，则页面重新呈现，我遇到另一个错误:第25:6行: React缺少一个依赖项：'id‘。要么包含它，要么删除依赖数组Reactive-钩子/详尽的-deps。我猜想此错误是由于在呈现.之外设置了id这一事实所致。
import React, { useState, useEffect } from "react";
import axios from "axios";
function DataFetcing() {
const [post
浏览 2提问于2021-01-31得票数 0
我正在将照片转换为base64并将其显示在控制台上，但useState中的值不会立即更新。它只显示了第二次尝试上传照片。
第一个console.log显示null，第二个显示第一个上传的照片，依此类推。
import React,{ useState } from 'react';
const Portfolio = () => {
const[fotoPortifolio, setFotoPortifolio] = useState({
foto: ""
})
function handleFoto(e){
浏览 3提问于2021-05-28得票数 0
回答已采纳
7回答
更改复选框值的正确方法是什么？
选项1
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [x, setX] = useState(false);
const soldCheckbox = ({ target: { checked } }) => {
console.log(x, checked);
setX(checke
浏览 0提问于2019-07-15得票数 19
1回答
这里是初学者。尝试让react-simple-keyboard与Gatsby & React一起工作。 我用某种状态(firstName: "Johnn")初始化我的表单。这应该是初始状态。我希望用户能够修改此名称，并将修改后的版本保存在状态。 我在这里初始化我的状态： const [inputs, setInputs] = useState({
firstName: "Johnn"
}) 当我单击该字段并按下虚拟键盘上的一个按钮(比如一个字母)时，它会删除整个字段的内容并将该字母放在其中，而不是将该字母添加到已有的内容中。另外:在字段
浏览 31提问于2020-07-21得票数 0
回答已采纳
我正在为一个简单的任务而挣扎，在React中，我有一个接受字符串或数字的输入字段。当按下“重置”按钮时，输入字段的值应该为空，以便我可以添加一个新的字符串。我已经使清除表单成为可能，但当它被清除时，我无法键入其他内容。是因为我在使用状态吗？有什么解决办法吗？
我的代码：
import React from 'react';
import './Input.css';
import { useState } from 'react';
const Input = () => {
const [value, setValue] =
浏览 14提问于2022-03-15得票数 0
回答已采纳
我很难处理一个包含useState的列表。我必须连续两次向列表中添加一项，并且只添加第二项。守则：
App.js
import React, { useState } from "react";
import ItemForm from "./itemForm";
function App() {
const [itemList, setItemList] = useState([]);
function addItem(item) {
setItemList([...itemList, item]);
}
return (
浏览 3提问于2021-09-27得票数 2
回答已采纳
我在试着创造一个功能，它将会有-
2个文本框-1表示键，1表示值
数组，它将在按钮被单击时保存文本框的值。
列表中的显示数组
为此，我在React Js中创建了组件-
import React, { useState } from 'react';
function HookArray() {
const[lKey,setKey]=useState('');
const[lValue,setValue]=useState('');
const[lKeyValue,setArray]=useState({id:'
浏览 12提问于2020-11-14得票数 1
回答已采纳
2回答
我做了一个项目列表，我可以添加项目，但我只能添加其中的一个，我不能两个都添加。description值被正确填充，而配方却没有。 这是我做的codesandbox。 https://codesandbox.io/s/magical-pond-vtu51?file=/src/App.js import React, { useState } from "react";
const NewMenu = () => {
const [recipeName, setRecipeName] = useState("");
const [descripti
浏览 44提问于2021-07-05得票数 1
1回答
Hı，我正在用React做表单项目。一切都进行得很顺利。我想在模态页面中显示输入的值。但我不知道ı是如何做到这一点的。如果你有任何想法，请帮助我。你能帮帮我吗？
这是我的contact.js页面；
import React, { useState } from "react";
import ModalComponent from "./ModalComponent/index.js";
const Contact = () => {
const [showModal, setShowModal] = useState(false);
c
浏览 2提问于2022-08-12得票数 0
const boldText = () => {
const text=document.getElementById('blog-text');
const originalText = text.innerHTML;
const input = document.getElementById('text-to-search');
if (input.value) {
const word=input.value.trim();
const regexp = new RegExp(word
浏览 15提问于2022-06-05得票数 0
我有一个反应组件，管理用户登录和退出，当用户在登录字段中键入电子邮件和密码时，整个组件(导航栏)在每次击键时重新渲染到Dom中，从而降低速度。 当用户在登录文件中键入凭据时，如何防止重新呈现导航栏？ import React, { useContext,useState } from 'react';
import { Postcontext } from '../contexts/Postcontext';
import axios from 'axios';
const Navbar = () => {
const { to
浏览 37提问于2020-04-13得票数 3
回答已采纳
2回答
下面列出了索引页面中的react应用程序设置中的三条不同的路由(索引和路由代码)。每当我成功地注册或验证自己，或者当我在主页中没有所需的令牌时，我希望能够自动地重定向到所需的页面。
我试过导航和重定向，但它们没有工作。非常感谢您的帮助，非常感谢！
索引
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import cookie from
浏览 15提问于2022-07-02得票数 1
回答已采纳
给定以下组件，当我按下年龄选择器并将值更改为15时，使我呈现一个没有“驾驶执照”字段的表单时，就会得到错误：
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
at invariant (react-dom.development.js:55)
at finishHooks (react-dom.development.js:11581)
at updateFunctionComponent (re
浏览 2提问于2018-11-25得票数 90
回答已采纳
我有一个父组件和两个子组件，如下所示：
ParentComponent：
import React, { useState } from "react";
import { Child1Comp } from "./Child1Comp";
import { Child2Comp } from "./Child2Comp";
export function ParentComp() {
const [step, setStep] = useState(1);
const [parentState, setParentState] = u
浏览 3提问于2021-05-28得票数 2
回答已采纳
1回答
我试着在react中做一个表单，它有上传图片的子组件(做预览，做得更漂亮)，但问题是我无法访问孩子的useState，其中是我需要发送到de backend的图片。 下面是该子组件的代码，在useState中，我需要通过父组件访问映像： import React, { useState, Fragment } from "react";
import {
Layout,
Container,
BoxUpload,
ContainerUploadImage,
TextUploadImage,
LabelUploadImage,
ImagePrevie
浏览 41提问于2021-07-16得票数 2
回答已采纳
在下面的代码中，对于React-Native，我希望'count‘的NumericInput在'containers’的数量发生变化时进行更新和显示。“count”的输入必须能够由用户输入修改，并且必须是“containers”中onChange函数的计算结果。
我如何在React-Native中做到这一点？
import React, { useState } from 'react';
import NumericInput from 'react-native-numeric-input';
const Plot = () => {
浏览 1提问于2021-03-08得票数 0
在react.js中，我添加了一个带有某些参数的表单。
import React , {useState} from "react";
AddUser组件有一些参数，我必须在其中存储数据。
const AddUser = () => {
const [user, useState] = useState({
name: " ",
username: " ",
email: " ",
phone: " ",
website:
浏览 21提问于2022-07-26得票数 -1
2回答
我想用表单中的几个值来更新状态，该表单在一个函数组件中只有一个更改处理程序。我不知道如何以正确的方式设置状态中的单个属性。我曾经在一个类组件中看到过这一点。 import React, {useState} from 'react'
import ReactDOM from 'react-dom'
export function Example(){
const [user, setUser] = useState({nickname: '', age: 0})
const handleChange = event => {
浏览 12提问于2019-08-31得票数 3
回答已采纳
1回答
我使用useMemo和useContext挂钩在我的react本机应用程序中存储登录和注销状态。
import { AuthContext } from "./src/app/context";
export default () => {
const [isLoading, setIsLoading] = React.useState(true);
const [userToken, setUserToken] = React.useState(null);
const [userType, setUserType] = React.useState(
浏览 2提问于2021-06-03得票数 0
我试图理解，它描述了如何使用react的上下文API来管理应用程序级的状态。对于一个简单的应用程序(在本例中是一个基本计数器应用程序)，它使用以下解决方案：
const CountContext = React.createContext()
function CountProvider(props) {
const [count, setCount] = React.useState(0)
const value = React.useMemo(() => [count, setCount], [count])
return <CountContext.Provid
浏览 6提问于2020-06-06得票数 34
回答已采纳
2回答
目前，我正在呈现一个歌曲列表，其中有一个按钮，我做了一个表单，以添加歌曲。我如何使它，所以当该表单提交时，它将隐藏的表单，而不按一下按钮。我试图创建一个useEffect来触发这个函数，但是我无法破解它。提前谢谢。
歌曲清单
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteSong, getSongs, updateSong } from '../../store/son
浏览 5提问于2021-12-09得票数 0
回答已采纳
2回答
我在这里读过很多同样的问题，我应用了对每个人都有用的东西，但它似乎对我不起作用。我尝试从API中获取数据，但即使使用UseEffect钩子，setList也不希望设置ListVille。这是我的密码，你知道为什么吗？
import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom'
import Entete from './MEP/entete'
function Localisation() {
const [CP, s
浏览 3提问于2022-07-01得票数 1
回答已采纳
我需要通过特定的用户角色来限制react路由器中的链接(我有存储在令牌中的角色)。我现在要做的是:通过SignIn组件将用户名和密码从提交时的自定义useAuth钩子发送到getTokens()函数，然后在路由值中传递一个布尔isModerator，以确保用户具有链接显示所需的权限。在我的例子中，请求只是在表单提交时不去服务器，可能是因为我误用了上下文api或以某种方式做出了反应。
所以现在我的useAuth钩子是这样的：
import React, { useState, createContext, useContext, useEffect } from "react";
浏览 7提问于2022-05-03得票数 0
回答已采纳
在这里，我使用了useState钩子在React中处理表单输入字段中的更改，但是我多次重复相同的代码，我想缩短它。是否有可能通过单一状态处理多个更改并在对象中提供输出？
import React, { useState } from "react";
const [enteredTitle, setEnteredTitle] = useState("");
const [enteredPrice, setEnteredPrice] = useState("");
const [enteredDate, setEn
浏览 1提问于2022-09-08得票数 -1
回答已采纳
2回答
我正在尝试在我的Ionic React应用程序中使用react-hook-form。我用这个简单的表格：
const Form: React.FC<{ color: string }> = ({ color }) => {
const { handleSubmit, register } = useForm();
const onSubmit = (data: any) => {
console.log(`%c${JSON.stringify(data)}`, `color: ${color}`);
};
return (
<f
浏览 8提问于2020-03-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
