如何在Qwik中实现点击按钮显示输入框并使其自动获取焦点

要实现点击按钮显示输入框时自动聚焦，你需要结合Qwik的useRef和useTask$来处理DOM元素引用与状态变化后的操作，具体步骤如下：

1. 创建输入框的DOM引用：用useRef获取输入框的DOM节点，这样才能调用它的focus()方法。
2. 绑定引用到输入框：在<input>标签上添加ref属性，关联刚才创建的ref。
3. 监听状态变化并触发聚焦：使用useTask$监听showInput的状态变化，当状态变为true（输入框显示）时，调用输入框的focus()方法。

修改后的完整代码如下：

import { useSignal, useRef, useTask$ } from '@builder.io/qwik';

export default component$(() => {
  const showInput = useSignal(false);
  // 创建输入框的DOM引用
  const inputRef = useRef<HTMLInputElement>();

  const handleClick = () => {
    showInput.value = !showInput.value;
  };

  // 监听showInput状态，当输入框显示时自动聚焦
  useTask$(({ track }) => {
    // 追踪showInput的变化，状态改变时重新执行task
    track(() => showInput.value);
    if (showInput.value && inputRef.current) {
      inputRef.current.focus();
    }
  });

  return <>
    <button onClick$={handleClick}>Show input</button>
    {/* 将ref绑定到输入框 */}
    <input ref={inputRef} class={showInput.value ? "" : "hidden"} />
  </>;
});

为什么要这么做？ #

Qwik的状态更新是异步的，直接在handleClick里调用focus()可能会因为输入框还未被渲染到DOM中而失效。useTask$是Qwik专门用来处理状态变化后副作用的API，通过track(() => showInput.value)可以确保每次showInput状态改变时，都会检查输入框是否显示，并在DOM准备好后执行聚焦操作，这种方式比用setTimeout更可靠，也更符合Qwik的响应式设计。

内容的提问来源于stack exchange，提问作者Ali Radan