The cornerstone of React applications are components. It is almost impossible to build a React application without using components. The widespread use of components has even led to some third-party packages providing components that can be used for integration capabilities.
These third-party components are usually reusable . The difference between them and components that may already be available in your application is specificity .
I mean: Suppose you run a company that sells Polo shirts, you can do this:
- Produce Polo shirts that have been printed with patterns, or
- Let the buyers choose the pattern they want.
Some basic elements will remain consistent, for example, all Polo shirts should be short-sleeved. But users can choose different styles of shirts, such as colors and sizes. In this case, a short-sleeved Polo shirt is a good React component: it is the same item with different variations.
Now let's say you are developing a login form. Like Polo shirts, forms have consistent characteristics, but we are not focusing on size and color changes, but input fields, submit buttons, and maybe even forget password links. This can componentize and implement various changes in inputs, buttons, links, etc.
Example of input elements
Let's look at it from the perspective of creating input fields for the form. Typical text inputs in the React component look like this:
class Form extends React.Component { constructor(props) { super(props); this.state = { username: '' }; } handleChange = (event) => { this.setState({ username: event.target.value }); }; render() { Return (); } }
In order for this input element to be reusable elsewhere and in the project, we have to extract it into its own component. Let's name it FormInput.
import React from 'react'; import PropTypes from 'prop-types'; const FormInput = ({ name, type, placeholder, onChange, className, value, error, children, label, ...props }) => { Return ( <div> <label htmlfor="{name}">{label}</label> <input type="{type}" name="{name}" placeholder="{placeholder}" onchange="{onChange}" classname="{className}" value="{value}"> {error &&<p> {error}</p> } </div> ); }; FormInput.defaultProps = { type: "text", className: "" }; FormInput.propTypes = { name: PropTypes.string.isRequired, type: PropTypes.oneOf(['text', 'number', 'password']), placeholder: PropTypes.string.isRequired, className: PropTypes.string, value: PropTypes.any, onChange: PropTypes.func.isRequired, label: PropTypes.string.isRequired // Added required label prop }; export default FormInput;
This component accepts certain props, such as the properties we need to create input using valid tags, including placeholders, values, and names. We set the input element in the render function and set the property value to props passed to the component. We even bind the input to the tag to make sure they are always together. You can see that we are not making assumptions by predefined anything. Our goal is to make sure that the component can be used in as many scenarios as possible.
This makes up a good component because it enforces good markup (what Brad Frost calls it "dumb React"), which suggests that not every component must be some kind of highly complex functionality. That being said, if we are talking about something very basic, like static headers, then using React components might be a bit overkill. The possible criterion for making something as a reusable component is when you need to use the same functionality in other parts of your application. If the component is used only once, a "reusable" component is usually not required.
We can use our input component in another component LoginPage.
import React, { Component } from 'react'; import FormInput from './FormInput'; // Import FormInput component class LoginPage extends Component { state = { user: { username: "", password: "" }, errors: {}, submitted: false }; handleChange = event => { const { user } = this.state; user[event.target.name] = event.target.value; this.setState({ user }); }; onSubmit = (event) => { event.preventDefault(); // Prevent default form submission const { user } = this.state; let errors = {}; if (!user.username) { errors.username = "Enter your username!"; } if (user.password.length {submitted ? ( <p>Welcome onboard, {user.username}!</p> ) : ( <div> <h3>Login!</h3> <forminput name="username" label="Username" placeholder="Enter your username" value="{user.username}" onchange="{this.handleChange}" error="{errors.username}"></forminput> <forminput name="password" type="password" label="Password" placeholder="Enter your password" value="{user.password}" onchange="{this.handleChange}" error="{errors.password}"></forminput> <button type="submit">Login</button> </div> )} ); } } export default LoginPage;
Have you seen how LoginPage uses FormInput twice? We use it as text input for both username and password. If we want to change the functionality of the input, we can make these changes in the FormInput component file we created, and these changes will be applied to each instance of using the input component. This is the basic advantage of having reusable components: you don't have to repeat yourself .
Even the error is displayed from the FormInput component.
The onSubmit function first verifies the user object we get from the form to make sure it conforms to the structure in which the username has a value. Note that we can even extend the functionality of the input, as we did, checking if the password contains at least eight characters.
If you look at the code, you will see that there is a Button component in it. This is different from an HTML element, but rather a different component that takes props that define the type of button we want (submit, reset, button), its class name, what to do when clicked, and the label. We can integrate many other button properties to enforce any standard you want.
const Button = ({ type, className, onClick, label, ...props }) => ( <button type="{type}" classname="{className}" onclick="{onClick}"> {label} </button> ); export default Button;
This is the final login form after putting all the components together.
Want to try it yourself? Try using reusable<input>
element. If this is too difficult, you can<input>
The element starts, then maybe a checkbox, and then jumps to<select></select>
. The key idea is to make it universal. I would love to see your achievements, so please link your work in the comment section!
The above is the detailed content of Demonstrating Reusable React Components in a Form. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

To deal with CSS browser compatibility and prefix issues, you need to understand the differences in browser support and use vendor prefixes reasonably. 1. Understand common problems such as Flexbox and Grid support, position:sticky invalid, and animation performance is different; 2. Check CanIuse confirmation feature support status; 3. Correctly use -webkit-, -moz-, -ms-, -o- and other manufacturer prefixes; 4. It is recommended to use Autoprefixer to automatically add prefixes; 5. Install PostCSS and configure browserslist to specify the target browser; 6. Automatically handle compatibility during construction; 7. Modernizr detection features can be used for old projects; 8. No need to pursue consistency of all browsers,

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

Setting the style of links you have visited can improve the user experience, especially in content-intensive websites to help users navigate better. 1. Use CSS's: visited pseudo-class to define the style of the visited link, such as color changes; 2. Note that the browser only allows modification of some attributes due to privacy restrictions; 3. The color selection should be coordinated with the overall style to avoid abruptness; 4. The mobile terminal may not display this effect, and it is recommended to combine it with other visual prompts such as icon auxiliary logos.

Use the clip-path attribute of CSS to crop elements into custom shapes, such as triangles, circular notches, polygons, etc., without relying on pictures or SVGs. Its advantages include: 1. Supports a variety of basic shapes such as circle, ellipse, polygon, etc.; 2. Responsive adjustment and adaptable to mobile terminals; 3. Easy to animation, and can be combined with hover or JavaScript to achieve dynamic effects; 4. It does not affect the layout flow, and only crops the display area. Common usages are such as circular clip-path:circle (50pxatcenter) and triangle clip-path:polygon (50%0%, 100 0%, 0 0%). Notice

To create responsive images using CSS, it can be mainly achieved through the following methods: 1. Use max-width:100% and height:auto to allow the image to adapt to the container width while maintaining the proportion; 2. Use HTML's srcset and sizes attributes to intelligently load the image sources adapted to different screens; 3. Use object-fit and object-position to control image cropping and focus display. Together, these methods ensure that the images are presented clearly and beautifully on different devices.

Different browsers have differences in CSS parsing, resulting in inconsistent display effects, mainly including the default style difference, box model calculation method, Flexbox and Grid layout support level, and inconsistent behavior of certain CSS attributes. 1. The default style processing is inconsistent. The solution is to use CSSReset or Normalize.css to unify the initial style; 2. The box model calculation method of the old version of IE is different. It is recommended to use box-sizing:border-box in a unified manner; 3. Flexbox and Grid perform differently in edge cases or in old versions. More tests and use Autoprefixer; 4. Some CSS attribute behaviors are inconsistent. CanIuse must be consulted and downgraded.

The choice of CSS units depends on design requirements and responsive requirements. 1.px is used for fixed size, suitable for precise control but lack of elasticity; 2.em is a relative unit, which is easily caused by the influence of the parent element, while rem is more stable based on the root element and is suitable for global scaling; 3.vw/vh is based on the viewport size, suitable for responsive design, but attention should be paid to the performance under extreme screens; 4. When choosing, it should be determined based on whether responsive adjustments, element hierarchy relationships and viewport dependence. Reasonable use can improve layout flexibility and maintenance.
