Загрузка...

Two Ways to Create and Use Uncontrolled Components in ReactJS

⭕ Overview
In an Uncontrolled Component, the "single source of truth" (data) is maintained in the actual DOM. They are like traditional HTML form inputs. An input form element whose value is not controlled by React in this way is called an “uncontrolled component”.

In an Uncontrolled Component, form data are retained in the DOM, but you can use a "ref" in React to get the values from the DOM. Since an uncontrolled component keeps the source of truth in the DOM, the displayed value will not update as the user types.

In this video, we'll learn how to create Uncontrolled Components in React using two approaches:

🔷 Using the React.createRef()
🔷 Using an inline callback function

⭕ Chapters
00:00 Introduction
03:57 Using the React.createRef() function
05:13 Using the inline callback function
07:14 Coding demo
22:21 Bonus: refactoring using a nested state properties

⭕ About me
I am a Web instructor and author for Linkedin Learning (formerly Lynda.com), Packt, E-C Council, Udemy, and MC Press.

⭕ Visit my site: https://christianhur.com
⭕ My complete online training courses:
☑️ REST APIs & AJAX Operations Using Node, Express, and jQuery: https://www.udemy.com/course/rest-apis-ajax-operations-using-node-express-and-jquery/?referralCode=A762AE70D9FD6A931F9B
☑️ Build Clean and Secure PHP Web Apps From Scratch: https://www.udemy.com/course/build-clean-and-secure-php-web-apps-from-scratch/?referralCode=C200BB52F0C7153B93CC
☑️ Angular 9 New Features: https://www.packtpub.com/web-development/angular-9-new-features-video
☑️ Full-Stack Web Development with Flask: https://www.packtpub.com/web-development/full-stack-web-development-flask-video
☑️ Full-Stack Web Development with Django & Angular 8: https://www.packtpub.com/web-development/full-stack-web-development-with-django-and-angular-8-video
☑️ Angular 7 New Features: https://www.packtpub.com/web-development/angular-7-new-features-video
☑️ The DOM in JavaScript, jQuery, AngularJS, and React : https://www.linkedin.com/learning/the-dom-in-javascript-jquery-angularjs-and-react
☑️ Building JSF Web Applications with Java EE 7: https://www.linkedin.com/learning/building-jsf-web-applications-with-java-ee-7
☑️ Troubleshooting Vue.js: https://www.packtpub.com/application-development/troubleshooting-vuejs-video

⭕ Check out my book:
Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP.NET, and JavaScript is available on Amazon and MC Press.
☑️ Link: https://www.mc-store.com/collections/christian-hur/products/developing-business-applications-for-the-web-with-html-css-jsp-php-asp-net-and-javascript

Видео Two Ways to Create and Use Uncontrolled Components in ReactJS канала Christian Hur
Яндекс.Метрика
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять