在React表單中，受控組件使用React狀態(tài)管理數(shù)據(jù)，而非受控組件依賴DOM處理數(shù)據(jù)。 1. 受控組件通過(guò)state控制輸入值，每次用戶輸入都會(huì)觸發(fā)事件更新?tīng)顟B(tài)，並能實(shí)時(shí)驗(yàn)證或格式化數(shù)據(jù)；2. 非受控組件使用ref獲取DOM值，適合僅需提交時(shí)獲取數(shù)據(jù)或與第三方庫(kù)集成的情況；3. 選擇依據(jù)在於是否需要對(duì)錶單數(shù)據(jù)進(jìn)行細(xì)粒度控制和實(shí)時(shí)交互。

In React forms, the difference between controlled and uncontrolled components comes down to how form data is handled. Controlled components use React state to manage and update input values, while uncontrolled components rely on the DOM itself to handle the data.

What Are Controlled Components?

Controlled components are those where form data is managed by React's state. Every time a user types into an input field, the component updates the state via an event handler, and the input value is tied directly to that state.

This gives you more control over the form data — you can validate inputs as they type, format values on the fly, or even reset fields programmatically.

For example:

• You have an <input> field for a username.
• That input's value is set to a state variable like username .
• The onChange handler updates that state every time the user types.

Here's what it looks like in code:

 function UsernameForm() {
  const [username, setUsername] = useState('');

  function handleChange(e) {
    setUsername(e.target.value);
  }

  return (
    <form>
      <input
        type="text"
        value={username}
        onChange={handleChange}
      />
    </form>
  );
}

Key points:

• The input value always reflects the current state.
• You can manipulate or validate the value before updating the state.
• This pattern works well with form validation libraries or when you need real-time feedback.

What Are Uncontrolled Components?

Uncontrolled components, on the other hand, let the DOM handle the form data. Instead of setting the value through state, you retrieve it when needed — typically using a ref.

They're useful if you want a quick-and-dirty form without managing every change in state. They also feel closer to traditional HTML forms.

To get the value from an uncontrolled input, you'd typically use a ref , like this:

 function UsernameForm() {
  const inputRef = useRef();

  function handleSubmit(e) {
    e.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

You might see these used in cases where:

• You don't need to track every keystroke.
• You're integrating with non-React code or third-party libraries.
• Performance isn't a concern and you just want something simple.

One thing to note: default values can be set with the defaultValue prop instead of value .

When to Use Each Type

Choosing between controlled and uncontrolled depends on your needs:

Use controlled components when:

• You need to validate or format input as the user types.
• You want to enable/disable buttons based on input state.
• You're building reusable form components or using form state across multiple parts of your app.

Use uncontrolled components when:

• You only care about the value when the form is submitted.
• You're dealing with a lot of inputs and tracking each one in state feels heavy.
• You're migrating old code or working with external libraries that expect direct DOM access.

There's no strict rule here — sometimes mixing both in different parts of the same form makes sense.

Ultimately, the choice depends on how much control you need over the form data. Controlled components give you more flexibility, while uncontrolled ones are simpler and less state-heavy. Both have their place depending on the situation.

基本上就這些。

以上是什麼是反應(yīng)形式中的受控組件和不受控制的組件？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！