React函数组件中自定义TextInput无法重置表单问题求助

问题原因 #

你的TextInput是受控组件，通过内部useState维护输入值状态。而form.current.reset()是直接操作原生DOM的方法，只会将原生input恢复到初始值，但不会触发React state的更新，所以组件的value状态不会同步重置，导致看起来没有变化。

解决方案 #

方案一：改为非受控组件（简单场景推荐）

去掉内部state，让原生input自行维护值，同时监听输入事件来更新label样式。这种方式下form.reset()会直接生效：

import { useRef, useState } from 'react';

function TextInput({ type = "text", label, name, required = false }) {
  const inputRef = useRef(null);
  const [isFilled, setIsFilled] = useState(false);

  const handleInput = (e) => {
    setIsFilled(!!e.target.value);
  };

  return (
    <div className={styles.footerFormInput}>
      <input
        ref={inputRef}
        type={type}
        onInput={handleInput}
        name={name}
        required={required}
      />
      <label className={isFilled && styles.filled} htmlFor={name}>
        {label}
      </label>
    </div>
  );
}

方案二：保持受控组件，监听表单reset事件

让组件内部监听父表单的reset事件，同步更新state：

import { useState, useEffect, useRef } from 'react';

function TextInput({ type = "text", label, name, required = false }) {
  const [value, setValue] = useState("");
  const inputRef = useRef(null);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    const form = inputRef.current?.form;
    if (!form) return;

    const resetHandler = () => setValue("");
    form.addEventListener('reset', resetHandler);
    
    return () => form.removeEventListener('reset', resetHandler);
  }, []);

  return (
    <div className={styles.footerFormInput}>
      <input
        ref={inputRef}
        type={type}
        value={value}
        onChange={handleChange}
        name={name}
        required={required}
      />
      <label className={value && styles.filled} htmlFor={name}>
        {label}
      </label>
    </div>
  );
}

这种方式不需要修改父组件代码，组件自包含重置逻辑。

方案三：父组件统一管理表单状态（复杂表单推荐）

将表单状态提升到父组件，通过onReset事件同步重置所有字段：

// 父组件代码
const form = useRef();
const [formData, setFormData] = useState({
  from_email: '',
  full_name: ''
});

const handleReset = () => {
  setFormData({
    from_email: '',
    full_name: ''
  });
};

const sendEmail = (e) => {
  e.preventDefault();
  // ...原有逻辑
  emailjs.sendForm(...).then(result => {
    form.current.reset();
  });
};

return (
  <form ref={form} onSubmit={sendEmail} onReset={handleReset}>
    <div className={styles.footerFormRow}>
      <TextInput
        type="email"
        label='דוא"ל'
        name="from_email"
        value={formData.from_email}
        onChange={(e) => setFormData(prev => ({...prev, from_email: e.target.value}))}
      />
      <TextInput
        type="text"
        label="שם מלא"
        name="full_name"
        value={formData.full_name}
        onChange={(e) => setFormData(prev => ({...prev, full_name: e.target.value}))}
      />
      <input type="text" name="somename" />
    </div>
  </form>
);

// 修改后的TextInput组件
function TextInput({ type = "text", label, name, required = false, value, onChange }) {
  return (
    <div className={styles.footerFormInput}>
      <input
        type={type}
        value={value}
        onChange={onChange}
        name={name}
        required={required}
      />
      <label className={value && styles.filled} htmlFor={name}>
        {label}
      </label>
    </div>
  );
}

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