迹忆客 专注技术分享

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

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

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

export default App;

问题是输入字段有一个 value 属性集，但它没有处理输入值更改的 onChange 属性。

解决这个问题的最简单方法是使用 onChange 属性来处理 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;

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

请注意 ，我们将输入值存储在状态中。

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

如果我们不想使用初始状态值，请将空字符串传递给 useState 钩子，例如 const [message, setMessage] = useState('')。

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

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

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>
      <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 对象的当前属性才能访问我们设置 ref 属性的输入元素。

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

useRef 钩子创建一个普通的 JavaScript 对象，但在每次渲染时都会为您提供相同的 ref 对象。 换句话说，它几乎是一个具有 .current 属性的记忆对象值。

需要注意的是，当你更改 ref 的当前属性的值时，不会导致重新渲染。

现在每次用户点击按钮时，输入字段的值都会被记录下来。 这种模式称为非受控组件。

请注意 ，我们使用了 defaultValue 属性而不是值。 defaultValue 属性允许我们为输入字段指定一个初始值。

如果我们在输入字段上使用 set value 属性，我们还需要设置 onChange 属性并处理更改事件，否则我们无法在输入框中输入内容。