在 React 中擁有“value”屬性有什么意義<input> ？

Question

我已經知道“值”與受控組件一起使用。 但是在這個測試中，當我刪除屬性value = {controlledValue}它仍然可以正常工作。

import React, { useState } from "react";

export const Controlled = props => {
  const [controlledValue, updateControlledValue] = useState("");

  const handleChange = event => {
    updateControlledValue(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();

    props.handleSubmittedData({
      controlled: controlledValue
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Controlled</h2>
      <input
        name="controlled"
        placeholder="controlled"
        type="text"
        value={controlledValue}
        onChange={handleChange}
      />
      <button disabled={!controlledValue} type="submit">
        Submit
      </button>
    </form>
  );
};

當我們已經用handleChange處理了controlledValue state 時，擁有value屬性有什么意義呢？

Answer 1

沒有必要添加 value = {controlledValue}

但是當您需要在開始鍵入之前或在某些 API 呼叫或操作之后為輸入框提供特定值時，它可能會有所幫助。 （這就是術語“受控”的意思，您可以在執行某些操作后控制該值）

例如

如果您有一個產品編輯頁面，並且需要編輯已存儲在數據庫中的產品名稱。 在這種情況下，您需要顯示存儲在數據庫中的初始值，並且用戶可以編輯和保存它。

對於這種情況，在我們從 API 獲得成功響應后，只需將產品名稱分配給值即可。

或者

如果您需要在單擊按鈕時將特定文本添加到輸入框 您可以將特定文本分配給值。