React更新计时器时如何防止输入框被清空失焦？

嘿，这个问题我之前帮好几个开发者排查解决过，本质上是组件重新渲染时输入框被意外重置了，咱们一步步来拆解问题和解决方案：

当你调用setState()更新计时器时，组件会触发重新渲染。如果输入框没有和组件状态绑定，或者组件被意外卸载后重新挂载，就会导致输入框的内容丢失、焦点也跟着消失。

1. 用受控组件管理输入状态（最核心的解决方式） #

把手机号和验证码的输入值存在组件的state里，通过value属性绑定到输入框，onChange事件同步更新state。这样即使组件重新渲染，输入框也会从state里读取最新值，不会清空：

// Class组件示例
class PhoneVerificationForm extends React.Component {
  state = {
    phoneNumber: '',
    smsCode: '',
    countdown: 60
  };

  handlePhoneInput = (e) => {
    this.setState({ phoneNumber: e.target.value });
  };

  handleCodeInput = (e) => {
    this.setState({ smsCode: e.target.value });
  };

  startCountdown = () => {
    const timer = setInterval(() => {
      this.setState(prevState => {
        if (prevState.countdown <= 1) {
          clearInterval(timer);
          return { countdown: 60 };
        }
        return { countdown: prevState.countdown - 1 };
      });
    }, 1000);
  };

  render() {
    return (
      <div className="verification-form">
        <input
          type="tel"
          value={this.state.phoneNumber}
          onChange={this.handlePhoneInput}
          placeholder="请输入手机号"
        />
        <div className="code-input-group">
          <input
            type="text"
            value={this.state.smsCode}
            onChange={this.handleCodeInput}
            placeholder="请输入验证码"
          />
          <button onClick={this.startCountdown} disabled={this.state.countdown > 0}>
            {this.state.countdown > 0 ? `${this.state.countdown}秒后重发` : '获取验证码'}
          </button>
        </div>
      </div>
    );
  }
}

如果是函数组件，写法类似，用useState来管理状态：

// 函数组件示例
import { useState } from 'react';

function PhoneVerificationForm() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [smsCode, setSmsCode] = useState('');
  const [countdown, setCountdown] = useState(60);

  const startCountdown = () => {
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer);
          return 60;
        }
        return prev - 1;
      });
    }, 1000);
  };

  return (
    <div className="verification-form">
      <input
        type="tel"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        placeholder="请输入手机号"
      />
      <div className="code-input-group">
        <input
          type="text"
          value={smsCode}
          onChange={(e) => setSmsCode(e.target.value)}
          placeholder="请输入验证码"
        />
        <button onClick={startCountdown} disabled={countdown > 0}>
          {countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
        </button>
      </div>
    </div>
  );
}

2. 避免组件被意外卸载重挂载 #

如果你的表单组件是在条件渲染中（比如{isShowForm && <PhoneVerificationForm />}），要确保isShowForm的状态不会因为计时器更新而改变。另外，给表单组件加上固定的key，让React识别这是同一个组件，不会在重新渲染时卸载再挂载：

{isShowForm && <PhoneVerificationForm key="phone-verification-form" />}

3. 优化不必要的渲染（可选） #

如果父组件的频繁渲染导致子表单组件跟着重复渲染，可以用React.memo来包裹子组件，减少不必要的渲染次数：

const PhoneVerificationForm = React.memo((props) => {
  // 表单逻辑
});

这样只有当组件的props发生变化时，才会重新渲染。

最关键的就是两点：

• 用受控组件绑定输入框和组件状态，确保输入值不会丢失
• 保证表单组件不会被意外卸载重挂载，通过固定key或稳定的条件渲染逻辑

按照这个思路调整你的代码，应该就能解决输入框清空和失焦的问题了！

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