fix: 修复取消活动管理弹窗输入框聚焦问题

This commit is contained in:
2026-03-06 10:30:37 +08:00
parent 1aa12a86c2
commit 05b89a4aeb

View File

@@ -16,8 +16,8 @@ const CancelPopup = forwardRef((props, ref) => {
const { detail } = props; const { detail } = props;
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [cancelReason, setCancelReason] = useState(""); const [cancelReason, setCancelReason] = useState("");
const [inputFocus, setInputFocus] = useState(false);
const onFinish = useRef(null); const onFinish = useRef(null);
const inputRef = useRef(null);
const { current_players, participants = [], publisher_id } = detail; const { current_players, participants = [], publisher_id } = detail;
const realParticipants = participants const realParticipants = participants
@@ -32,16 +32,15 @@ const CancelPopup = forwardRef((props, ref) => {
show: (onAct) => { show: (onAct) => {
onFinish.current = onAct; onFinish.current = onAct;
setVisible(true); setVisible(true);
// 使用 requestAnimationFrame 替代 setTimeout(0),性能更好 // 使用 Taro.nextTick 确保在下一个渲染周期后聚焦
requestAnimationFrame(() => { Taro.nextTick(() => {
requestAnimationFrame(() => { setInputFocus(true);
inputRef.current && inputRef.current.focus();
});
}); });
}, },
})); }));
function onClose() { function onClose() {
setInputFocus(false);
setVisible(false); setVisible(false);
setCancelReason(""); setCancelReason("");
} }
@@ -85,13 +84,13 @@ const CancelPopup = forwardRef((props, ref) => {
{hasOtherJoin && ( {hasOtherJoin && (
<View className={styles.cancelReason}> <View className={styles.cancelReason}>
<Input <Input
ref={inputRef}
className={styles.input} className={styles.input}
placeholder="请输入取消理由" placeholder="请输入取消理由"
focus focus={inputFocus}
value={cancelReason} value={cancelReason}
onInput={(e) => setCancelReason(e.detail.value)} onInput={(e) => setCancelReason(e.detail.value)}
maxlength={100} maxlength={100}
onBlur={() => setInputFocus(false)}
/> />
</View> </View>
)} )}