在 React 中拥有“value”属性有什么意义<input> ？

Question

I have already known that the "value" is used with Controlled components. But at this test , when I delete the property value = {controlledValue} it still works perfectly fine.

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>
  );
};

What is the point of having the value property when we have already handled the controlledValue state with handleChange ?

Answer 1

It is not necessary to add value = {controlledValue}

But it could be helpful when you need to give a specific value to the input box before start typing or after some API call, or action. (This is what mean by the term "controlled" you can control the value after some action)

For example

If you have a product edit page and you need to edit the name of a product that is already stored in DB. in this case you need to display the initial value which is stored in DB and the user is able to edit and save that.

for such a case after we get a successful response from API just assign the product name to value.

or

If you need to add a specific text to an input box when you click a button You can just assign the specific text to value.