unable to enter text in the input box in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript angular css html

unable to enter text in the input box in react

author：jiyik last updated：2025/03/05 views：

to work around the issue of input fields not being able to be controlled in react, make sure to use defaultvaluethe property instead of the value of the uncontrolled input field. alternatively, set a onchangeproperty on the field and handle the change event.

here is an example of how the problem occurs.

const app = () => {
  return (
    <div><inputtype="text"value="initial value" />div>
  );
};
exportdefaultapp;

the problem is that the input field has a valueattribute set, but it doesn't have a property to handle changing the input value onchange.

the easiest way to solve this is to use onchangethe property to handle inputchange events on the field.

import {usestate} from 'react';

const app = () => {
  const [message, setmessage] = usestate('initial value');

  // 👇️ called every time input's value changes
  const handlechange = event => {
    setmessage(event.target.value);
  };

  console.log(message);

  return (
    <div><inputid="message"name="message"type="text"onchange={handlechange}value={message}
      />div>
  );
};
exportdefaultapp;

we use onchangethe property to handle change events on the input field. handlechangethe function is called every time the field value changes.

请注意, we store the input value in the state.

the hook may be usestatepassed an initial state value.

if we don't want to use the initial state value, pass an empty string to usestatethe hook, const [message, setmessage] = usestate('')e.g.

now, every time the user types in the input field, handlechangethe function is called and a new value is set for the message variable, which re-renders the input field and displays the current value.

another way to handle the problem where we can't type is to use an uncontrolled input field.

mport {useref} from 'react';

const app = () => {
  const ref = useref(null);

  const handleclick = () => {
    // 👇️ ref.current is a reference to the input field
    console.log(ref.current.value);
  };

  return (
    <div><inputref={ref}id="message"name="message"defaultvalue="initial value"type="text"
      /><buttononclick={handleclick}>log input valuebutton>div>
  );
};
exportdefaultapp;

useref()the hook can be passed an initial value as an argument. the hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we must access refthe current property of the object in order to access refthe input element on which we set the property.

when we pass a ref prop to an element, for example , react sets refthe object’s .currentproperty to the corresponding dom node.

userefthe hook creates a normal javascript object, but gives you the same refobject on every render. in other words, it's almost a .currentmemoized object value with a property.

it is important to note that when you change the value of the ref's current attribute, it will not cause a re-render.

now every time the user clicks the button, the value of the input field will be recorded. this pattern is called an uncontrolled component.

请注意, we used defaultvaluethe attribute instead of a value. defaultvaluethe attribute allows us to specify an initial value for the input field.

if we use the property on the input field set value, we also need to set onchangethe property and handle the change event, otherwise we won't be able to type in the input box.

previous：setting conditional initial values for usestate in react

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

setting conditional initial values for usestate in react

publish date：2025/03/05 views：166 category：react

在 react 中为 usestate 设置条件初始值：将函数传递给 usestate 钩子。使用条件来确定状态变量的正确初始值。该函数只会在初始渲染时调用。 import {usestate} from react ; export default functio

setting default values for input elements in react

publish date：2025/03/05 views：166 category：react

在 react 中为 input 元素设置默认值：将默认值作为参数传递给受控字段的 usestate 挂钩。在不受控制的 input 字段上设置 defaultvalue 属性。 import {useref, usestate} from react ; export default functi

publish date：2025/03/05 views：107 category：react

要解决错误 export usehistory was not found in react-router-dom ，请改用 usenavigate 钩子，例如 const navigate = usenavigate() 。该钩子返回一个函数，允许我们以编程方式导航。 // ?️ import usenavigate

styling the border-radius property in react

publish date：2025/03/05 views：70 category：react

使用 borderradius css 属性来设置 react 中元素的边框半径样式，例如 div style={{border: 1px solid red, borderradius: 30px}} 。如果我们需要设置特定边框的样式，请使用相应的属性，例如 borderbottom

component definition is missing display name error in react

publish date：2025/03/05 views：133 category：react

在组件上设置 displayname 属性以修复 component definition is missing display name 错误，例如 app.displayname = myapp; 。或者，禁用带有以下注释的行的 eslint 规则 - // eslint-disable-next-line react/display-na

expected corresponding jsx closing tag error in react

publish date：2025/03/05 views：121 category：react

当我们忘记关闭 jsx 代码中的标签时，会出现 react.js 错误 expected corresponding jsx closing tag 。要解决错误，请使用自闭标签，例如 input / 并确保 jsx 代码中开始和结束标签的顺序是正确的。

type usestate as array of objects in react typescript

publish date：2025/03/05 views：158 category：react

要在 react 中将 usestate 钩子键入为对象数组，请使用钩子的泛型，例如 const [employees, setemployees] = usestate{salary: number; name: string}[]([]) 。状态变量可以初始化为一个空数组，并且只接受指

publish date：2025/03/05 views：144 category：react

在 react 中处理 select 元素上的 onchange 事件：在 select 元素上设置 onchange 属性。将所选选项的值保存在状态变量中。每次用户更改所选选项时，更新状态变量。 import {usestate} from react

publish date：2025/03/05 views：73 category：react

在 react 中从数组中为 select 生成 option 标签：使用 map() 方法迭代数组。在每次迭代中，返回一个选项元素。将唯一的关键属性传递给每个选项元素。 const app = () = { const arr = [ { value

unable to enter text in the input box in react-ag捕鱼王app官网