React Input组件的两种使用场景

在 React 项目中，我们会高频率使用 Input 组件。Input 文本框通常用来获取用户填写的信息，根据用户填写的信息做出对应的业务逻辑

一个简单的 Input 组件在不同的场景下，有不同的使用方式，总的来说有以下几种

输入内容后立马处理逻辑

取项目中的一个真实业务场景，根据关键字过滤列表数据，这就属于在输入框输入内容，立马向后端发送 HTTP 请求，一旦输入框内容更新，再发送 HTTP 请求

针对上面的业务场景，我们需要对输入框的 onChange 事件加防抖

添加防抖的作用：

• 避免数据竞态
• 减少组件重渲染次数

示例代码如下所示

import React, { useEffect, useState } from "react";
import type { ChangeEvent } from "react";

const Example = (): JSX.Element => {
  const [value, setValue] = useState<string>("");

  // useDebounceFn 是自定义的防抖函数hook
  const onChange = useDebounceFn((e: ChangeEvent<HTMLInputElement>): void => {
    const value = e.target.value;
    setValue(value);
  });

  useEffect((): void => {
    if (value.trim()) {
      // do something
    }
  }, [value]);

  return <input onChange={onChange} type="text" autofocus />;
};

export default Example;

输完内容后再处理逻辑

除了输入内容后立马处理逻辑之外，另一种就是输完内容后再处理逻辑情况

针对这种情况的业务场景，通常情况下，用户点击按钮后，获取输入框里的内容，再根据内容作对应的逻辑处理。此业务场景还分两种情况

• 组件嵌套层级不深，可以使用 useState 存储输入内容

import React, { useState } from "react";
import type { ChangeEvent } from "react";

const Example = (): JSX.Element => {
  const [value, setValue] = useState<string>("");

  const onChange = useDebounceFn((e: ChangeEvent<HTMLInputElement>): void => {
    const value = e.target.value;
    setValue(value);
  });

  const getValue = (): void => {
    console.log("value =", value.trim());
  };

  return (
    <>
      <input onChange={onChange} type="text" autofocus />
      <button onClick={getValue}>点击获取输入内容</button>
    </>
  );
};

export default Example;

• 组件嵌套层级很深，推荐使用 useRef 存储输入内容，避免组件重渲染

import type { ChangeEvent } from "react";
import React, { useRef } from "react";

const Example = (): JSX.Element => {
  const inputRef = useRef<string>("");

  const onChange = (e: ChangeEvent<HTMLInputElement>): void => {
    inputRef.current = e.target.value;
  };

  const getValue = (): void => {
    console.log("value =", inputRef.current.trim());
  };

  return (
    <>
      <input onChange={onChange} type="text" autofocus />
      <Child1 />
      <Child2>
        <Child4 />
      </Child2>
      <Child3 />
      <button onClick={getValue}>点击获取输入内容</button>
    </>
  );
};

export default Example;