Сброс значения входного элемента с помощью React Hooks

Question

Я сделал useInput крючок, который выглядит следующим образом.

export function useInput({
  type,
  name,
  placeholder,
  initialValue,
  helpText,
  required,
  onKeyUp,
  errorMessage,
}: Props) {
  const [value, setValue] = useState(initialValue)
  const input =
    type === 'textarea' ? (
      <div className="form-group">
        <label>{name}</label>
        <span>{helpText}</span>
        <textarea
          name="email"
          className="form-control"
          required={required}
          id={name}
          value={value}
          aria-describedby={name}
          placeholder={placeholder}
          onChange={(e) => setValue(e.target.value)}
        />
      </div>
    ) : (
      <div className="form-group">
        <label>{name}</label>
        <span>{helpText}</span>
        <input
          type={type}
          name="email"
          className="form-control"
          id={name}
          required={required}
          value={value}
          aria-describedby={name}
          placeholder={placeholder}
          onChange={(e) => setValue(e.target.value)}
          onKeyUp={onKeyUp}
        />
        <>{errorMessage}</>
      </div>
    )
  return [value, input]
}

На своих страницах я могу просто использовать хук, как показано ниже

const [description, descriptionInput] = useInput({
    type: 'textarea',
    name: 'Description',
    helpText: <small className="muted"> (Optional)</small>,
    placeholder: 'I found this interesting because...',
  })

, а внутри функции рендеринга использовать их как {descriptionInput}, и значение будет доступно в description.

Тем не менее, я ищу способы программного обновления значения - чтобы указать c, например, для сброса значения входов при отправке формы. Все, что у меня есть, это ссылка на вход и само значение. Есть хороший способ продолжать использовать ловушку и сбросить значение по желанию?

Answer 1

Вы можете просто выставить функцию перезапуска из вашей ловушки, которую вы можете вызвать, чтобы сбросить состояние в initialValue или пустое

export function useInput({
  type,
  name,
  placeholder,
  initialValue,
  helpText,
  required,
  onKeyUp,
  errorMessage,
}: Props) {
  const [value, setValue] = useState(initialValue);
  const resetInput = useCallback(() => {
      setValue(initialValue || "" );
  }, [])
  const input =
    type === 'textarea' ? (
      <div className="form-group">
        <label>{name}</label>
        <span>{helpText}</span>
        <textarea
          name="email"
          className="form-control"
          required={required}
          id={name}
          value={value}
          aria-describedby={name}
          placeholder={placeholder}
          onChange={(e) => setValue(e.target.value)}
        />
      </div>
    ) : (
      <div className="form-group">
        <label>{name}</label>
        <span>{helpText}</span>
        <input
          type={type}
          name="email"
          className="form-control"
          id={name}
          required={required}
          value={value}
          aria-describedby={name}
          placeholder={placeholder}
          onChange={(e) => setValue(e.target.value)}
          onKeyUp={onKeyUp}
        />
        <>{errorMessage}</>
      </div>
    )
  return [value, input, resetInput]
}

и использовать его как

const [description, descriptionInput, resetDescriptionInput] = useInput({
    type: 'textarea',
    name: 'Description',
    helpText: <small className="muted"> (Optional)</small>,
    placeholder: 'I found this interesting because...',
  })

PS Однако, поскольку этот хук на самом деле возвращает JSX-контент, вы также можете написать его как компонент и предоставить функцию, которая будет использоваться ссылкой с useImperativeHandle