在 React 中使用自定义挂钩时，如何为文本输入设置初始值？

Question

我已经为输入编写了一个自定义挂钩来管理输入的更改处理程序、取消焦点处理程序和重置。我想知道是否可以设置一个初始值，以便当用户到达页面时，输入已经有一个值，然后可以更改它。

这是自定义挂钩：

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}
/>

Answer 1

你可以在声明 enteredValue:

时添加 defaultVal

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

Answer 2

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

下面是使用方法：

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

在 React 中使用自定义挂钩时，如何为文本输入设置初始值？

How do I set an initial value for a text input when using a custom hook in react?

javascript

input

reactjs

react-hooks