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