如何在 ReactJS 中创建半透明文本输入？

在本文中，我们将学习如何在 ReactJS 中创建半透明文本输入。

先决条件：

1. JavaScript（ES6）知识
2. 熟悉 HTML/CSS。
3. ReactJS 的基础知识。

用于构建此应用程序的 React 钩子是：

• 反应使用状态

JavaScript 模块：

• 样式化组件
• 成帧运动

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

第 1 步：现在，您将使用 create-react-app 启动一个新项目，因此打开您的终端并输入：

npx create-react-app translucent-input-box

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

cd translucent-input-box

第 3 步：添加项目期间需要的 npm 包：

npm install framer-motion styled-components

第 5 步：现在打开新创建的项目并打开src文件夹并删除以下文件（可选）：

• • 徽标.svg
  • serviceWorker.js
  • setupTests.js
  • 索引.css
  • App.test.js（如果有）

创建一个名为Input的文件夹并创建以下文件：

• 组件.jsx
• 组件.motion.js
• 组件样式.js

项目结构：它看起来像这样。

项目结构

方法：

• 我们将使用framer-motion和styled components创建一个半透明的动画文本输入。
• Wrapper、Input、Label、Underline是Component.jsx文件中用于制作文本输入框的样式组件。
• 在Component.jsx文件中，我们使用带有来自Component.motion.js文件的自定义动画变体的 framer-motion 来为文本输入框设置动画。
• React useState钩子用于管理用作占位符属性的值的状态，并在活动时将其设置为标签。
• Framer-motion useCycle hook 类似于 react useState hook。它循环播放一系列用于动画的视觉属性。它用于在动画变体之间切换或循环。

执行：

应用程序.js

import React, { useState } from "react";
import "./App.css";

import Input from "./Input";

const App = () => {
  // The useState hook is used to manage the state of 
  // "value" that is used as placeholder attribute
  // and also to set it as a label when clicked
  const [value, setValue] = useState("");
  
  return (
    

      

       {/* "Input" component created using styled-components
       and animated using framer-motion
       */}
         setValue(value)}
          label={"First name"}
        />
      
    
  );
};

export default App;