场景
有一个聊天输入框组件,输入框上面有表情包组件。
通过redux创建了store,存储一个message的状态,用于表情包和输入框共享状态。
输入框通过设置value和onClick做了一个简单双向绑定,其中value的值为store里的message。
js
import { update } from "@/features/messageSlice";
import { useStoreSelector, useStoreDispatch } from "@/hooks/store";
const ChatInput: React.FC = () => {
const message = useStoreSelector((state) => state.message.value);
const dispatch = useStoreDispatch();
return (
<textarea
value={message}
onChange={(e) => {
const val = (e.target as HTMLTextAreaElement).value;
dispatch(update(val));
}}
className="chatInput"
style={{
width: "100%",
resize: "none",
outline: "none",
border: "none",
}}
></textarea>
);
};
export default ChatInput;
表情包组件做了一个方法,选择表情包时通过回调传回值与message值做拼接,结果message值为上一次的值
js
const message = useStoreSelector((state) => state.message.value);
console.log("message1", message);
const dispatch = useStoreDispatch();
const onSelectContent = (ct: any) => {
console.log("message2", message);
dispatch(update(message + ct.emoji));//message为上一次的值
};
retu
结果:当我输入一段文字后,添加一个表情包,再输入一段文字,再添加一个表情包时。。就会覆盖掉前一段文字。
个人尝试:设置一个state存储选择的表情包,然后通过useEffect监听state的变化更新message。结果出现新bug,那就是不能重复选择表情包,因为state不改变导致useEffect不执行