如何在 ReactJS 中创建快速拨号组件？

Material-UI Lab 托管了尚未完全准备好用于核心库的新的令人兴奋的组件。快速拨号组件就像一个带有多个浮动操作按钮的对话框。它可用于使任何主要操作（如共享、复制、打印等）更易于访问，并使用户体验更好。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app gfg

第 2 步：创建项目文件夹后，即 gfg ，使用以下命令移动到该文件夹：

cd gfg

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装material-ui模块：

npm install @material-ui/core
npm install @material-ui/icons
npm install @material-ui/lab

在src文件夹中创建一个文件socials.js ：我们将创建一个示例组件“社交”，它使用快速拨号组件显示网站的所有社交句柄。在src文件夹中创建一个新文件socials.js ，我们将在其中定义我们的组件。

项目结构：它将如下所示。

Material-UI 中的快速拨号：

快速拨号组件可用于将多个主要操作一起显示为浮动操作按钮。它的一些有用的道具：

hidden：设置 SpeedDial 是隐藏还是可见
方向：设置浮动操作按钮的方向，即向上、向下、向右和向左。
图标：快速拨号图标
onOpen/onClose：当 SpeedDial 展开和关闭时的处理函数。

例子：

socials.js

import React from 'react';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import InstagramIcon from '@material-ui/icons/Instagram';
import GitHubIcon from '@material-ui/icons/GitHub';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import TwitterIcon from '@material-ui/icons/Twitter';
import EditIcon from '@material-ui/icons/Edit';
  
const style = {
    margin: 0,
    right: 20,
    bottom: 20,
    position: 'fixed',
};
  
const actions = [
    { icon: , 
    name: 'GitHub', link: "https://www.google.com/" },
    { icon: , 
    name: 'LinkedIn', link: "https://www.google.com/" },
    { icon: , 
    name: 'Twitter', link: "https://www.google.com/" },
    { icon: , 
    name: 'Instagram', link: "https://www.google.com/" },
];
  
export default function Socials() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => {
        setOpen(true);
    };
  
    const handleClose = () => {
        setOpen(false);
    };
    return (
        
            } />}
                onClose={handleClose}
                onOpen={handleOpen}
                open={open}
            >
                {actions.map((action) => (
                    
                ))}
            
        
    );
}

App.js

import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Socials from './socials';
  
class App extends Component {
    render() {
        return (
            
                
                


                
                    
                        Geeks for Geeks
                    
                    

                    
                        Speed Dial Demo
                    
                
                


                
            
        );
    }
}
  
export default App;

应用程序.js

import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Socials from './socials';
  
class App extends Component {
    render() {
        return (
            
                
                


                
                    
                        Geeks for Geeks
                    
                    

                    
                        Speed Dial Demo
                    
                
                


                
            
        );
    }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：