如何通过HTML输入框更新React useState的默认初始值？

你可以通过给输入组件绑定value和onChange属性实现状态和输入内容的同步，具体实现如下：

实时更新状态（输入时自动同步） #

核心逻辑是将输入框的显示值和state绑定，每次输入触发change事件时直接更新state，代码示例：

import { useState } from 'react';

function Demo() {
  const [seconds, setSeconds] = useState(0);

  const handleChange = (e) => {
    // 处理输入值，将字符串转为数字，空输入默认设为0
    const val = e.target.value;
    setSeconds(val ? Number(val) : 0);
  };

  return (
    <div>
      {/* 原生HTML数字输入框 */}
      <input 
        type="number"
        value={seconds}
        onChange={handleChange}
        placeholder="请输入秒数"
      />
      <p>当前seconds的值为：{seconds}</p>
    </div>
  );
}

点击确认后再更新状态 #

如果需要输入完成后主动触发才更新，可以加临时状态存储输入内容，点击按钮时再同步到seconds：

import { useState } from 'react';

function Demo() {
  const [seconds, setSeconds] = useState(0);
  // 临时存储输入内容
  const [tempInput, setTempInput] = useState('');

  const handleConfirm = () => {
    setSeconds(tempInput ? Number(tempInput) : 0);
  };

  return (
    <div>
      <input 
        type="number"
        value={tempInput}
        onChange={(e) => setTempInput(e.target.value)}
        placeholder="请输入要设置的秒数"
      />
      <button onClick={handleConfirm}>确认更新</button>
      <p>当前seconds的值为：{seconds}</p>
    </div>
  );
}

补充说明 #

• 如果你使用的是Ant Design、MUI等组件库的输入组件，逻辑完全一致，只要绑定对应组件的value和onChange属性即可，大部分组件库的数字输入组件会直接返回数字类型的值，不需要手动做类型转换。
• 如果你的seconds需要支持字符串类型，去掉Number()转换逻辑，把input的type改为text即可。

内容的提问来源于stack exchange，提问作者Python-Pirate