在React中使用自定义hook时如何为文本输入框设置初始值

1. 修改自定义useInput Hook逻辑 #

只需调整3处逻辑即可支持初始值传入，修改后的完整代码如下：

import { useState } from "react";

// 给defaultVal添加默认空字符串，避免不传参数时报错
const useInput = (validateValue, defaultVal = '') => {
  // 将enteredValue的初始值改为传入的defaultVal
  const [ enteredValue, setEnteredValue ] = useState(defaultVal);
  const [ isTouched, setIsTouched ] = useState(false);

  const validInput = validateValue(enteredValue);
  const hasError = !validInput && isTouched;

  const  inputChangedHandler = event => {
    setEnteredValue(event.target.value);
  }

  const inputUnfocusHandler = event => {
    setIsTouched(true);
  }

  const reset = () => {
    // 重置时恢复为初始传入的defaultVal而非固定空字符串
    setEnteredValue(defaultVal);
    setIsTouched(false);
  }

  return {
    value: enteredValue,
    isValid: validInput,
    hasError,
    inputChangedHandler,
    inputUnfocusHandler,
    reset
  }
}

export default useInput;

2. 调用时传入初始值 #

使用hook时第二个参数传入你需要的预设值即可，示例如下：

// 示例：邮箱输入框预设值为test@example.com
const {
    value: email,
    isValid: validEmail,
    hasError: emailError,
    inputChangedHandler: emailChangedHandler,
    inputUnfocusHandler: emailUnfocusHandler,
    reset: resetEmail
  } = useInput(isEmail, 'test@example.com');

// 输入框绑定逻辑保持不变
<label htmlFor='email'>邮箱</label>
<input 
   required
    type='email' 
    id='email' 
    value={email}
    onChange={emailChangedHandler}
    onBlur={emailUnfocusHandler}
/>

可选优化：支持异步获取的初始值 #

如果你的预设值是异步从接口获取的，需要在hook内添加监听逻辑，同步更新输入框值：

import { useState, useEffect } from "react";

const useInput = (validateValue, defaultVal = '') => {
  const [ enteredValue, setEnteredValue ] = useState(defaultVal);
  const [ isTouched, setIsTouched ] = useState(false);

  // 添加useEffect监听defaultVal变化，异步值更新后自动同步到输入框
  useEffect(() => {
    setEnteredValue(defaultVal);
  }, [defaultVal])

  // 其余逻辑保持不变
  const validInput = validateValue(enteredValue);
  const hasError = !validInput && isTouched;

  const  inputChangedHandler = event => {
    setEnteredValue(event.target.value);
  }

  const inputUnfocusHandler = event => {
    setIsTouched(true);
  }

  const reset = () => {
    setEnteredValue(defaultVal);
    setIsTouched(false);
  }

  return {
    value: enteredValue,
    isValid: validInput,
    hasError,
    inputChangedHandler,
    inputUnfocusHandler,
    reset
  }
}

内容的提问来源于stack exchange，提问作者Dov Royal