#yyds干货盘点# react笔记之学习之创建表单

简介: #yyds干货盘点# react笔记之学习之创建表单

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

创建表单组件

父组件

import Logs from "./Components/Logs/Logs";
import LogsForm from "./Components/LogsForm/LogsForm";
import './App.css';
const App = () => {
  return <div className="app">
    {/*引入LogsFrom*/}
    <LogsForm/>
    <Logs/>
  </div>;
};
// 导出App
export default App;

子组件

import React from 'react';
import Card from "../UI/Card/Card";
import './LogsForm.css';
const LogsForm = () => {
    return (
        <Card className="logs-form">
            <form>
                <div className="form-item">
                    <label htmlFor="date">日期</label>
                    <input id="date" type="date"/>
                </div>
                <div className="form-item">
                    <label htmlFor="desc">内容</label>
                    <input id="desc" type="text"/>
                </div>
                <div className="form-item">
                    <label htmlFor="time">时长</label>
                    <input id="time" type="number"/>
                </div>
                <div className="form-btn">
                    <button>添加</button>
                </div>
            </form>
        </Card>
    );
};
export default LogsForm;

总结

image.png

相关文章
|
11天前
|
JSON 前端开发 JavaScript
|
13天前
|
前端开发 JavaScript 数据处理
如何学习React的高级概念?
【8月更文挑战第26天】如何学习React的高级概念?
24 2
|
13天前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
26 1
|
30天前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
34 6
|
7天前
|
容器 Kubernetes Docker
云原生JSF:在Kubernetes的星辰大海中,让JSF应用乘风破浪!
【8月更文挑战第31天】在本指南中,您将学会如何在Kubernetes上部署JavaServer Faces (JSF)应用,享受容器化带来的灵活性与可扩展性。文章详细介绍了从构建Docker镜像到配置Kubernetes部署全流程,涵盖Dockerfile编写、Kubernetes资源配置及应用验证。通过这些步骤,您的JSF应用将充分利用Kubernetes的优势,实现自动化管理和高效运行,开启Java Web开发的新篇章。
15 0
|
8天前
|
前端开发 JavaScript 数据管理
React Formik入门:简化表单处理的神器——全面掌握Formik在React表单开发中的高效应用与实战技巧
【8月更文挑战第31天】在React应用中,表单处理常常因繁琐而令人头疼。Formik作为一个开源库,专为简化React表单设计,减少冗余代码并提升处理效率。本文介绍Formik的使用方法及其优势,通过示例展示如何安装配置并创建基本表单,帮助开发者轻松应对各种表单需求。
12 0
|
23天前
|
前端开发 JavaScript API
React学习-初始化react项目
【8月更文挑战第16天】
|
26天前
|
移动开发 API UED
React-Router 基础学习
React-Router 基础学习
23 0
|
26天前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
36 0
|
2月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
34 1

热门文章

最新文章

下一篇
DDNS