antd react 邮箱地址补全

最新推荐文章于 2025-12-11 03:00:01 发布

原创最新推荐文章于 2025-12-11 03:00:01 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用React和Ant Design的AutoComplete组件实现的邮箱地址搜索功能。该组件能够根据输入的部分字符，自动补全可能的邮箱地址后缀，如@gmail.com、@163.com等，提供更友好的用户体验。

import React, { Component } from 'react'
import { AutoComplete } from 'antd'

const { Option } = AutoComplete

export default class serach extends Component {
  state = {
    result: [],
  }
  handleSearch = (value) => {
    let res = []

    if (!value || value.indexOf('@') >= 0) {
      res = []
    } else {
      res = ['gmail.com', '163.com', 'qq.com'].map((domain) => `${value}@${domain}`)
    }

    this.setState({
      result: res,
    })
  }
  render() {
    let { result } = this.state
    return (
      <AutoComplete
        style={{
          width: 200,
        }}
        onSearch={this.handleSearch}
        placeholder="请输入邮箱地址"
      >
        {result.map((email) => (
          <Option key={email} value={email}>
            {email}
          </Option>
        ))}
      </AutoComplete>
    )
  }
}