تغییر یک ورودی بدون کنترل در ری‌اکت (React JS)

اول از همه، وقتی میخوای یک اینپوت "بدون کنترل" رو به یک ورودی "کنترل‌شده" تبدیل کنی، باید دقت کنی که همه چیز رو درست انجام بدی، چون ممکنه به خطاهایی مثل "read-only" بودن اینپوت برخورد کنی. این خطاها وقتی رخ میدن که value رو به استیت گره بزنی ولی هیچ event handler‌ ای برای تغییرش (مثل onChange) تعریف نکنی. در این حالت، value به صورت ثابت می‌مونه و نمی‌تونی اونو تغییر بدی.

راه‌حلش خیلی ساده‌ست:
باید مطمئن بشی که onChange رو درست تنظیم کرده باشی تا هر بار که کاربر چیزی تایپ می‌کنه، استیت هم به‌روز بشه..

یه مثال ساده:

import React, { useState } from "react";
function MyComponent() {
  const [inputValue, setInputValue] = useState("");
  const handleChange = (event) => {
  setInputValue(event.target.value);
};
  return (
    <input
     type="text"
     value={inputValue}
     onChange={handleChange}
  />
);
}
export default MyComponent;

در این مثال، inputValue به عنوان state کنترل‌شده تعریف شده و value اون مستقیماً به input گره خورده. هر بار که کاربر چیزی رو تایپ می‌کنه، handleChange فراخوانی میشه و مقدار جدید ورودی به state اضافه می‌شه. اینجوری اینپوت شما دیگه "کنترل‌شده" می‌شه و به درستی کار می‌کنه.

در نهایت، اگر قبلاً از props یا ref برای گرفتن مقدار استفاده می‌کردی، باید اون‌ها رو با state و event handlers مناسب جایگزین کنی.

این روال باید مشکل تو رو حل کنه و ورودی‌هات رو به درستی کنترل‌شده کنه.