fix: 修复取消活动管理弹窗输入框聚焦问题
This commit is contained in:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user