برای پیاده‌سازی فرم‌ها، توصیه می‌کنیم در اکثر موارد از کامپوننت‌های کنترل‌شده استفاده کنید. در یک کامپوننت کنترل‌شده، اطلاعات مربوط به فرم توسط یک کامپوننتِ ری‌اکت مدیریت می‌شود. را‌هکار دیگر استفاده از کامپوننت‌های کنترل‌نشده است که در آنها اطلاعات مربوط به فرم توسط خود DOM مدیریت می‌شود.
\nبرای نوشتن یک کامپوننت کنترل‌نشده، بجای نوشتن یک event handler و آپدیت کردن state در تک تک موارد، می‌توانید از یک رفرنس استفاده کنید و مقادیر فرم را از DOM دریافت کنید.
\nبرای مثال در کد زیر، یک کامپوننت کنترل‌نشده تنها یک نام را به عنوان ورودی می‌پذیرد:
\nclass NameForm extends React.Component {\n constructor(props) {\n super(props);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.input = React.createRef(); }\n\n handleSubmit(event) {\n alert('A name was submitted: ' + this.input.current.value); event.preventDefault();\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Name:\n <input type=\"text\" ref={this.input} /> </label>\n <input type=\"submit\" value=\"Submit\" />\n </form>\n );\n }\n}از آن‌جایی که یک کامپوننت کنترل‌نشده مقادیر DOM را مبنای حقیقت قرار می‌دهد، گاهی اوقات تلفیق کردن کدهای نوشته شده با ری‌اکت و کدهای غیر ری‌اکتی آسان‌تر خواهد بود چنانچه از کامپوننت‌های کنترل‌نشده استفاده شده باشد. علاوه بر این، اگر قصد انجام کاری را دارید که در آن سرعت از دقت مهمتر است، استفاده از این روش می‌تواند منجر به نوشتن اندکی کد کمتر شود. در غیر اینصورت به طور معمول می‌بایستی از کامپوننت‌های کنترل‌شده استفاده کنید.
\nاگر هنوز برایتان کاملا روشن نیست که در یک شرایط خاص از کدام روش باید استفاده کنید، این مقاله در باب مقایسه ورودی‌های کنترل‌شده و کنترل‌نشده می‌تواند برایتان مفید باشد.
\nدر طول چرخه رندر شدن یک کامپوننت در ری‌اکت، مقادیر DOM با مقادیر صفت value موجود در المنت‌های مربوط به فرم جایگزین می‌شوند. در صورت استفاده از یک کامپوننت کنترل‌نشده، اغلب اوقات چنین می‌خواهید که ری‌اکت یک مقدار اولیه به المنت تخصیص دهد ولی آپدیت‌های متعاقب آن را کنترل‌نشده رها کند. برای نیل به این مقصود می‌توانید صفت defaultValue را بجای value مشخص کنید. بعد از اینکه کامپوننت در DOM تعبیه شد، تغییر دادن مقدار defaultValue موجب آپدیت شدن مقادیر DOM نخواهد شد.
render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Name:\n <input\n defaultValue=\"Bob\" type=\"text\"\n ref={this.input} />\n </label>\n <input type=\"submit\" value=\"Submit\" />\n </form>\n );\n}به همین ترتیب، <input type="checkbox"> و <input type="radio"> از defaultChecked و <select> و <textarea> از defaultValue پشتیبانی می‌کنند.
در زبان HTML، به کار بردن <input type="file"> به کاربر اجازه می‌دهد یک یا چند فایل را از حافظه دستگاه خود انتخاب کرده آنها را بر روی یک سرور بارگذاری کند و یا از طریق File API به اطلاعات موجود در فایل دسترسی پیدا کند.
<input type=\"file\" />در ری‌اکت، یک <input type="file" /> همواره یک کامپوننت کنترل‌نشده است به این دلیل که تنها توسط کاربر قابل مقداردهی است و نه از طریق دستورات نوشته‌شده در برنامه.
برای کار کردن با فایل‌ها باید از File API استفاده کنید. مثال زیر چگونگی ساختن یک رفرنس به یک نودِ DOM به منظور دسترسی به فایل(ها) در submit handler را نشان می‌دهد:
\nclass FileInput extends React.Component {\n constructor(props) {\n super(props);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.fileInput = React.createRef(); }\n handleSubmit(event) {\n event.preventDefault();\n alert(\n `Selected file - ${this.fileInput.current.files[0].name}` );\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Upload file:\n <input type=\"file\" ref={this.fileInput} /> </label>\n <br />\n <button type=\"submit\">Submit</button>\n </form>\n );\n }\n}\n\nReactDOM.render(\n <FileInput />,\n document.getElementById('root')\n);