Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add @mention autocomplete in task description 👥

オープン 初心者向け
  • 何か問題がありますか？
#455 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
70/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
javascript, react
領域
frontend

調査の方向性

まず client/src/components/Task/TaskModal.jsx を読み、タスクの説明がどのように表示、更新されるかを確認します。提供されたチームリストを初期ソースとして使用し、そこで要求された @mention の候補を追加します。@ を入力すると一致する候補が表示され、候補を選択すると説明にメンションが挿入されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

good first issue

Add @mention autocomplete in task description 👥

File: client/src/components/Task/TaskModal.jsx

You can type @name but nothing happens 💀
No autocomplete, no suggestions fr!!

Fix: show suggestion dropdown when @ typed:
const [mentionQuery, setMentionQuery] = useState('')
const [showSuggestions, setShowSuggestions] = useState(false)

const handleDescChange = (e) => {
const val = e.target.value
setForm({...form, description: val})
const lastWord = val.split(' ').pop()
if (lastWord.startsWith('@')) {
setMentionQuery(lastWord.slice(1))
setShowSuggestions(true)
} else {
setShowSuggestions(false)
}
}

// hardcode team members for now:
const TEAM = ['anoopcodehack', 'phisher01', 'omkarwarik02']
const suggestions = TEAM.filter(m =>
m.includes(mentionQuery)
)

{showSuggestions && suggestions.length > 0 && (

{suggestions.map(s => ( { const words = form.description.split(' ') words[words.length-1] = `@${s} ` setForm({...form, description: words.join(' ')}) setShowSuggestions(false) }} className="block w-full text-left px-3 py-2 text-xs text-[#888] hover:bg-[#2a2a2f]"> @{s} ))} )}

~20 lines! No backend needed 🎯

主要言語
JavaScript
スター
39
フォーク
105
平均マージ
1日 12時間
マージ済み PR（30日）
27

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

anoopcodehack/DevBoard のほかの issue

anoopcodehack/DevBoard の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。