用react中的state写一个按钮+弹框的程序

题目：在页面上有一个按钮，点击按钮出现一个旋转的loading，提交按钮不可点击，等待一秒后弹框显示提交失败或者提交成功，接下来我们直接开始
在此之前，我相信您已经安装好了react运行环境，如何创建react工程我就不再赘述，首先我们分析这个题目，按钮，弹框，两个子类组件，然后建一个父类来提供他们数据交流，接下来我们创建一个工程：
1.创建工程 first2react(项目名称)：

2.在src文件夹下建好我们需要的组件弹框(Dialog)，按钮(Button)，父类(App)，还有一个App.css文件来编写样式：

3.编写代码

按钮（Button）:

接下来就是弹框（Dialog）：

父类App:
import React,{Component} from “react”;
import Button from “./Button”;
import Dialog from “./Dialog”;
import “./App.css”

class App extends Component{
state={
loading:false,
dialog:false,
message:“xxx”
}

submit=()=>{this.setState({loading:true})// 模拟数据请求，假设数据请求经过一秒的到结果setTimeout(()=>{// 通过随机数的方式模拟可能出现的成功与失败两种结果const res=Math.random(1);if(res>0.5){this.setState({dialog:true,message:"提交成功！"})}else{this.setState({dialog:true,message:"提交失败！"})}this.setState({loading:false})},1000);
}// 关闭事件
close=()=>{this.setState({dialog:false})
}render(){const {loading,dialog,message}=this.state;return(<div><Button loading={loading} submit={this.submit}>提交</Button>{dialog&&<Dialog message={message} close={this.close}/>}</div>)
}

}
export default App

编写css文件：
button {
background: none;
border: none;
outline: none;
width: 100px;
height: 30px;
border: 1px solid orange;
border-radius: 4px;
font-size: 16px;
display: block;
margin: 20px auto;
}

.loading {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 10px;
margin-right: 10px;
border-bottom: transparent;
border-top: transparent;
animation-name: loading;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.dialog-backdrop {
background: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.dialog-container {
width: 300px;
background: #FFFFFF;
border-radius: 4px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}

.dialog-header {
height: 20px;
text-align: center;
line-height: 20px;
}

.dialog-body {
line-height: 1.6;
text-align: center;
margin-top: 20px;
}

.dialog-footer {
margin-top: 20px;
}
.dialog-footer button {
margin: 0 auto;
border: none;
background: orange;
color: #fff;
}

@keyframes loading {
from {
transform: rotate(0);
}

to {transform: rotate(360deg);
}

}

index.js文件代码：

4.运行
点击按钮-》

50%的概率成功与否，这样一个简单的程序就完成了，相信很多学react的小伙伴都能看得懂这个代码，就是数据的传递，我个人倒觉得css有点难度，

用react中的state写一个按钮+弹框的程序相关推荐

React中的state和props有什么区别？
本文翻译自:What is the difference between state and props in React? I was watching a Pluralsight course o ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
写一个简单的Java界面程序
写一个简单的Java界面程序有时候未免想写一些有界面的java小程序练练手,那么如何写一个比较好看的界面话程序呢?下面小编就带你一步一步来搭建这个小洋房. 实现界面化编程要用到的一个主要包impor ...
python软件代码示例-用Python写一个模拟qq聊天小程序的代码实例
Python 超简单的聊天程序客户端: import socket, sys host = '10.248.27.23' # host = raw_input("Plz imput des ...
写一个《扎金花》程序自己玩。
写一个<扎金花>程序自己玩.hongjin2用一年半的时间基本自学完了程序设计专业的主干课程(除了<扎金花>,hongjin2实在看不懂),1995年hongjin2参加了初级 ...
如何用python写一个计算日期间隔的程序？
如何用python写一个计算日期间隔的程序? 文章目录如何用python写一个计算日期间隔的程序? 前言问题梳理问题解决写在后面前言为什么想起来写一个这样的程序呢? 前几天聊天的时候,突然 ...
怎样用java写一个简单的文件复制程序
怎样用java写一个简单的文件复制程序代码来源:https://jingyan.baidu.com/article/c35dbcb0d6f1398916fcbc07.html package Num ...
能不能用python开发qq_用Python写一个模拟qq聊天小程序的代码实例
用Python写一个模拟qq聊天小程序的代码实例发布时间:2020-09-09 07:49:29
用Python写一个模拟qq聊天小程序的代码实例
前言今天小编就为大家分享一篇关于用Python写一个模拟qq聊天小程序的代码实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 Python 超简单的聊天 ...

用react中的state写一个按钮+弹框的程序

用react中的state写一个按钮+弹框的程序相关推荐

最新文章

热门文章