Я пытаюсь использовать библиотеку реактивных упоминаний, в которой есть функция onAdd в качестве реквизита, который срабатывает, когда пользователь выбирает значение из предложенных предложений. Я использовал зацепки для того же самого, но когда я установил значение комментария, данные устарели внутри функции onAdd, даже если они вызываются после запуска события onChange. Вот фрагмент кода для того же
import React, { useState, useEffect } from "react";
import { MentionsInput, Mention } from "react-mentions";
const MyComponent = props => {
let [comment, setComment] = useState("");
function onAdd(id, display) {
// Do something here
console.log("Comment inside onAdd: ", comment);
}
function handleCommentChange(e) {
// Handle the changes in the textArea
console.log("from handleCommentChange: ", e.target.value);
setComment(e.target.value);
}
function renderSuggestion(entry, search, highlightedDisplay, index, focused) {
// Modify the suggestion dropdown by returning valid JSX
return (
<>
<span>{entry.display}</span>
</>
);
}
function handleSubmitComment(e) {
e.preventDefault();
// Do something to submit comment
}
return (
<>
<MentionsInput
markup="@[__display__](__id__)"
value={comment}
onChange={handleCommentChange}
placeholder={"Mention people using '@'"}
>
<Mention
trigger="@"
data={[{
id: "1",
display: "Jimmy"
},
{
id: "2",
display: "Ketut"
},
{
id: "3",
display: "Gede"
}]}
renderSuggestion={renderSuggestion}
onAdd={onAdd}
appendSpaceOnAdd={true}
/>
</MentionsInput>
<button onClick={handleSubmitComment}>Comment</button>
</>
);
};
export default MyComponent;
Теперь, когда я проверяю из файла handleCommentChange console.log, он имеет значение @Jimmy, если я выбираю Jimmy, но внутри функции onAdd это все равно @
Который был предыдущим значением комментария, а не текущим значением. Я новичок в реакции хуков и хотел бы знать, что мне здесь не хватает?