A brief analysis of controlled and uncontrolled components in React
Uncontrolled componentsThe form data is handled by the DOM itself. That is, it is not controlled by setState(), and is similar to traditional HTML form input. The input value shows the latest value (using ref to get the form value from DOM) 1. Uncontrolled components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Prepare a container-->
<div id="test"></div>
<!--Introduce react core library-->
<script src="../js/react.development.js"></script>
<!--Introduce react-dom to support react operation dom-->
<script src="../js/react-dom.development.js"></script>
<!--Introduce babel to convert jsx to js-->
<script src="../js/babel.min.js"></script>
<!--Introduce prop-types to restrict component tag properties-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
myRef1 = React.createRef();
myRef2 = React.createRef();
handleSubmit = (event) => {
event.preventDefault() // Prevent form submission const username = this.myRef1.current
const password = this.myRef2.current
alert(`The username you entered is: ${username.value}, the password you entered is: ${password.value}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
Username: <input ref={this.myRef1} type="text"/>
Password: <input ref={this.myRef2} type="text"/>
<button>Login</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html> Controlled ComponentsIn HTML, the values of tags <input>, <textarea>, and <select> are usually updated based on user input. In React, mutable state is typically stored in a component's state property and can only be updated using setState() . The React component that renders the form also controls what happens to that form upon subsequent user input. This way, input form elements controlled by React change their values, which is called a "controlled component." 2. Controlled components (controlled)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Prepare a container-->
<div id="test"></div>
<!--Introduce react core library-->
<script src="../js/react.development.js"></script>
<!--Introduce react-dom to support react operation dom-->
<script src="../js/react-dom.development.js"></script>
<!--Introduce babel to convert jsx to js-->
<script src="../js/babel.min.js"></script>
<!--Introduce prop-types to restrict component tag properties-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
// Initialize state state = {
username: '',
password: ''
}
// Save the username to the state saveUsername = (e) => {
this.setState({username: e.target.value})
}
// Save the password to the state savePassword = (e) => {
this.setState({password: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault() // Prevent form submission const {username,password} = this.state
alert(`The username you entered is: ${username}, the password you entered is: ${password}`)
}
render() {
// onChange changes return (
<form onSubmit={this.handleSubmit}>
Username: <input onChange={this.saveUsername} type="text"/>
Password: <input onChange={this.savePassword} type="text"/>
<button>Login</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
NoticeGenerally, controlled components are used more frequently because ref is used multiple times in uncontrolled components, and the official documentation says "do not overuse ref". Using it too many times will cause efficiency problems. in conclusionBoth controlled and uncontrolled elements have their advantages and the choice depends on the specific situation. If the form is very simple in terms of UI feedback, it is perfectly fine to control the ref, i.e. use an uncontrolled component.
The above is a brief analysis of the details of controlled components and uncontrolled components in React. For more information about controlled and uncontrolled components in React, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: A record of a Linux server intrusion emergency response (summary)
>>: MySQL incremental backup and breakpoint recovery script example
Recommend
18 sets of exquisite Apple-style free icon materials to share
Apple Mug Icons and Extras HD StorageBox – add on...
Mysql anonymous login cannot create a database problem solution
Frequently asked questions Access denied for user...
IE9beta version browser supports HTML5/CSS3
Some people say that IE9 is Microsoft's secon...
Eight ways to implement communication in Vue
Table of contents 1. Component Communication 1. P...
Detailed explanation of the use of Element el-button button component
1. Background Buttons are very commonly used, and...
MySQL 5.7.18 binary package installation tutorial under Linux (without default configuration file my_default.cnf)
I am currently learning MySQL. I am a complete no...
Basic operations of MySQL data tables: table structure operations, field operation example analysis
This article uses examples to describe the basic ...
Solution to input cursor misalignment in Chrome, Firefox, and IE
Detailed explanation of the misplacement of the in...
Summary of situations where MySQL indexes will not be used
Types of Indexes in MySQL Generally, they can be ...
About the layout method of content overflow in table
What is content overflow? In fact, when there is ...
React High-Order Component HOC Usage Summary
One sentence to introduce HOC What is a higher-or...
Example of using UserMap in IMG
usemap is an attribute of the <img> tag, use...
Teach you how to use AWS server resources for free
AWS - Amazon's cloud computing service platfo...
How to solve the high concurrency problem in MySQL database
Preface We all know that startups initially use m...
JS implementation of carousel carousel case
This article example shares the specific code of ...