无法在 React 中输入输入字段问题 [已解决]

无法在 React 中输入输入字段问题[已解决]

Unable to type in Input field issue in React [Solved]

要解决无法在 React 中输入字段的问题，请确保使用defaultValueprop 而不是value不受控制的输入字段。或者，onChange在字段上设置一个道具并处理更改事件。

以下是问题如何发生的示例。

const App = () => {
  return (
    <div>
      <input type="text" value="initial value" />
    </div>
  );
};

export default App;

问题是该input字段有一个value道具集，但它没有onChange处理输入值变化的道具。

解决这个问题的最简单方法是使用onChangeprop 来处理input字段上的更改事件。

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>
      <input
        id="message"
        name="message"
        type="text"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

我们使用onChangeprop 来处理输入字段上的更改事件。handleChange每次字段值更改时都会调用该
函数。

请注意，我们将 的值存储input在状态中。

可以向useState挂钩传递初始状态值。

现在，每次用户在输入字段中键入内容时，handleChange都会调用该函数并为message变量设置一个新值，这会重新呈现该input字段并显示当前值。

处理我们无法输入的问题的另一种方法是使用不受控制的输入字段。

import {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>
      <input
        ref={ref}
        id="message"
        name="message"
        defaultValue="Initial value"
        type="text"
      />

      <button onClick={handleClick}>Log input value</button>
    </div>
  );
};

export default App;

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

It should be noted that when you change the value of the current property of
the ref, no re-renders are caused.

Now every time the user clicks on the button, the value of the input field is
logged. This pattern is called
uncontrolled components.

Notice that we used the defaultValue prop instead of value. The
defaultValue prop allows us to specify an initial value for the input field.

If you use set the value prop on an input field, you are required to also
set the onChange prop and handle the change event, otherwise you can’t type in
the input field.