如何在 NextJS 中添加电话输入?
在本文中,我们将学习如何在 NextJs 中添加电话输入。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。
方法:要添加我们的电话输入,我们将使用 react-phone-input-2 包。 react-phone-input-2 包帮助我们将电话输入集成到我们的应用程序中。所以首先,我们将安装 react-phone-input-2 包,然后我们将在我们的主页上添加一个电话输入。
创建 NextJS 应用程序:您可以使用以下命令创建一个新的 NextJs 项目:
npx create-next-app gfg
安装所需的包:现在我们将使用以下命令安装 react-phone-input-2 包:
npm i react-phone-input-2
项目结构:它看起来像这样。
添加电话输入:安装软件包后,我们可以轻松地在应用程序的任何页面上添加电话输入。在本例中,我们将向主页添加电话输入。
在index.js文件中添加以下内容:
Javascript
import React, { useState } from "react";
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
export default class PhoneInputGfg extends React.Component {
constructor(props) {
super(props);
this.state = { phone: "" };
}
render(){
return (
NextJs Phone Input - GeeksforGeeks
this.setState({ phone })}
/>
);
}
};
说明:在上面的例子中,我们首先从 react 中导入 PhoneInput 组件和 useState 钩子。然后我们使用 useState 挂钩来存储电话号码的值。之后,我们将使用已安装的包添加我们的电话输入。
运行应用程序的步骤:在终端中运行以下命令来运行应用程序。
npm run dev