Taro v4框架开发微信小程序（获取节点）

使用Ref获取元素

在Taro框架中，可以通过引用（Ref）来操作元素节点。下面的示例展示了如何使用Ref获取并控制input元素。

步骤一：定义Ref

创建一个Ref对象，并指定引用的元素类型：

tsx 复制代码

const inputRef = useRef<HTMLInputElement>(null)

上述代码中，我们指定了HTMLInputElement作为Ref的类型，意味着这个Ref将链接到一个input元素。该Ref的初始值被设置为null。

步骤二：绑定Ref到元素

将Ref绑定到页面中的input元素上：

tsx 复制代码

<Input ref={inputRef} defaultValue='辰火流光' />

如此一来，就能通过inputRef来访问并操作这个input元素了。

步骤三：调用

此时的inputRef.current中存储的是input节点，我们可以通过点击某个按钮，将input获得焦点

css 复制代码

function handleClick() {
  inputRef.current?.focus()
}

<Button onClick={handleClick}>聚焦Input</Button>

当按钮被点击时，handleClick函数被调用，该函数会使input元素获得焦点，前提是inputRef.current不为null。

在WebStorm中创建事件

在WebStorm编辑器中，可以使用Alt+Enter快捷键来快速创建事件处理函数，如下图所示：

微信小程序中预览效果

页面渲染完毕后操作节点

如果想要在页面完全渲染之后再对DOM节点进行操作，必须在useReady生命周期钩子中执行相关代码。比如，要在页面加载完成后更改input的值，我们可以这样写：

tsx 复制代码

import { useReady } from '@tarojs/taro';

useReady(() => {
  inputRef.current!.value = '测试';
});

通过上述方法，我们可以在页面渲染完成后立即将input的值设置为"测试"。

在Taro中处理动态插入的DOM节点

有时我们需要处理动态插入到DOM中的节点。特别是那些根据某些状态才显示的组件或元素，只有当它们被实际渲染到页面上之后，我们才能获取到它们的引用。为了处理这种情况，Taro提供了nextTick方法，它允许我们在下一次DOM更新结束后执行回调函数。

使用State控制元素显示

我们使用状态（state）来控制是否显示某个DOM元素。在组件初始化时，我们设置该元素不显示：

tsx 复制代码

const [isShow, setIsShow] = useState(false);

使用Effect进行定时器设置

然后，我们通过使用useEffect钩子创建一个定时器，来模拟异步获取数据并更新状态以显示元素的情况。useEffect在此处是因为我们希望在组件完成首次渲染后执行定时器的设置。

tsx 复制代码

useEffect(() => {
  const timer = setTimeout(() => {
    setIsShow(true);
  }, 3000);

  return () => clearTimeout(timer);
}, []);

空依赖数组[]表示这个effect只在组件的生命周期中执行一次。

使用Taro.nextTick获取新插入节点的引用

定时器内的setIsShow(true)会触发整个组件的重新渲染，因为在React中，状态（state）的更新会导致组件重新执行，并触发与状态变化相关的DOM更新。在状态变化后，新的节点即Input组件会被插入到DOM中。

为了在这个Input元素被插入DOM后获取其引用，我们使用Taro.nextTick方法：

tsx 复制代码

Taro.nextTick(() => {
  console.log(inputRef.current?.value);
});

这段代码确保在状态更新导致的页面重新渲染完成之后，再去尝试读取input元素的属性。

整体代码示例

以下是结合上述各点的完整组件示例：

tsx 复制代码

import { useEffect, useRef, useState } from 'react';
import { View, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';

export default function Index() {
  const [isShow, setIsShow] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShow(true);
      Taro.nextTick(() => {
        console.log(inputRef.current?.value);
      });
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View className='index'>
      {isShow && (
        <Input ref={inputRef} defaultValue='辰火流光' />
      )}
    </View>
  );
}

微信小程序中预览效果