在反应中使用自定义钩子时如何为文本输入设置初始值？答案

【问题标题】：How do I set an initial value for a text input when using a custom hook in react?在反应中使用自定义钩子时如何为文本输入设置初始值？
【发布时间】：2021-11-03 22:57:01
【问题描述】：

我为输入编写了一个自定义钩子来管理输入的changedhandler、unfocushandler 和reset。我想知道是否可以设置一个初始值，这样当用户进入页面时，输入中已经有一个值，然后可以在之后更改它。

这是自定义钩子：

import { useState } from "react";

const useInput = (validateValue, defaultVal) => {
  const [ enteredValue, setEnteredValue ] = useState('');
  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 = () => {
    setEnteredValue('');
    setIsTouched(false);
  }

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

export default useInput;

这是输入：

const {
    value: email,
    isValid: validEmail,
    hasError: emailError,
    inputChangedHandler: emailChangedHandler,
    inputUnfocusHandler: emailUnfocusHandler,
    reset: resetEmail
  } = useInput(isEmail);

<label htmlFor='name'>First Name</label>
<input 
   required
    type='text' 
    id='name' 
    value={fName}
    onChange={fnameChangedHandler}
    onBlur={fnameUnfocusHandler}
/>

【问题讨论】：

标签： javascript reactjs input react-hooks

【解决方案1】：

你可以通过 react 的 defaultValue 属性来做到这一点，它在处理表单元素时特别有用。

所以这里是如何使用它：

<input 
  required
  type="text"
  id="name"
  defaultValue="first name default value"
  onChange={fnameChangedHandler}
  onBlur={fnameUnfocusHandler}
/>

【讨论】：

【解决方案2】：

您可以在声明enteredValue时添加defaultVal：

const [ enteredValue, setEnteredValue ] = useState(defaultVal || "");

【讨论】：

所以我收到一个类型错误，因为我还传递了一个验证函数。例如。 const isNotEmpty = (value) => value.trim() !== "";