Javascript onChange在检查字符串时多次追加数据

我试图在textarea字段中添加一个下拉值，它可以作为一个提示。因此，如果有一个“@”调用下拉菜单，用户将选择一个用户，一旦选择下拉菜单，显示隐藏它自己，用户应该能够附加他们的评论数据

我遇到的问题是，

setCommentBody

会多次/在 文本区

我的目标是

检查@symbol（它已经在做了）

调用@symbol后的“渲染”下拉列表（已在执行此操作）

选择一个值后，隐藏下拉列表并添加其注释（下拉列表仅在删除@symbol时隐藏，在选择一个值后应隐藏该符号）

提到stackoverflow comment部分的内容应该非常有用

这就是我目前所拥有的

const [comment_body, setCommentBody] = useState("");
const [mentionedUser, setMentionedUser] = useState(false);

const commentChange = (comment) => {
  console.log("this is the selected User", selectedUser); // selected user is a reducer initalState
  // call this condition if @ is mentioned once
  if (comment.includes("@")) {
    setMentionedUser(true); // render dropwdown
    setCommentBody(comment.concat(selectedUser)); // append the selected user like @barnowl with the respective comment data
  } else {
    console.log("can you see me");
    setMentionedUser(false); // hide dropdown
    setCommentBody(comment);
  }

  setGifUrl(""); // irrelvant to the problem ignore
};

positemContainer

<CommentForm
  commentChange={(e: any) => commentChange(e.target.value)}
  comment_body={comment_body}
  onSubmit={(e) => commentSubmit(e, post.id)}
  gifUrl={selectGif}
  isGif={gifUrl}
  mentionedUser={mentionedUser}
/>;

commentChange（e.target.value）}
comment_body={comment_body}
onSubmit={（e）=>commentSubmit（e，post.id）}
gifull={selectGif}
isGif={gifUrl}
提及者={提及者}
/>;

评论表单（片段）

。。。。
setgif已选择（真）}
/>;
{
props.IncoteedUser&&(
setSelectedOptionValue（e.target.value）}
name=“提及用户”
>
{indicationUsers.map（（项，键）=>(
{item.display}
))}
);
}

我的问题的一个最简单的工作示例

---

如果我正确理解用例，当选择字段更改时，应触发名称插入逻辑：

const commentChange = (comment) => {
  setCommentBody(comment);
  if (comment.includes("@")) {
    showMentionList(true);
  }
};
const selectedUserChange = (user) => {
  setSelectedUser(user);
  setCommentBody(commentBody.concat(user).replace("@", ""));
  showMentionList(false);
};

...

<select
  value={selectedUser}
  onChange={(e) => selectedUserChange(e.target.value)}
  name="mentionedUsers"
>
  {users.map((item, key) => (
    <option key={key} value={item}>
      {item}
    </option>
  ))}
</select>

const commentChange=（comment）=>{
setCommentBody（comment）；
if（注释.包括（“@”））{
显示列表（真）；
}
};
const selectedUserChange=（用户）=>{
设置选择器（用户）；
setCommentBody（commentBody.concat（user.replace）（“@”和“））；
显示列表（假）；
};
...
selectedUserChange（e.target.value）}
name=“提及用户”
>
{users.map（（项，键）=>(
{item}
))}

---

这对你有用吗？请参阅：

在您的代码沙盒中，我没有看到用户名被附加到注释中。抱歉，延迟了，您必须按空格或其他字符，用户名将在那里填充。无论如何，我们可以在用户名之前保留at符号，同时保持相同的逻辑。有点像不和谐提及或twitter提及。你可以保留

@

并用更详细的逻辑替换

if（comment.includes（“@”）

。例如，您可以跟踪准确的更改以确定用户正在写入的位置，以及用户当前键入的单词的开头是否有@符号。是的，我做了

comment.charAt（0）。包括（“@”）

，谢谢。

const commentChange = (comment) => {
  setCommentBody(comment);
  if (comment.includes("@")) {
    showMentionList(true);
  }
};
const selectedUserChange = (user) => {
  setSelectedUser(user);
  setCommentBody(commentBody.concat(user).replace("@", ""));
  showMentionList(false);
};

...

<select
  value={selectedUser}
  onChange={(e) => selectedUserChange(e.target.value)}
  name="mentionedUsers"
>
  {users.map((item, key) => (
    <option key={key} value={item}>
      {item}
    </option>
  ))}
</select>