React中绑定state的number类型输入框清空变0问题如何解决

修复方案 #

核心逻辑是在转换数字前先判断输入值是否为空，空值直接保留空字符串，仅当有实际输入内容时再转换为Number类型，避免空字符串被转为0。

你只需要修改handleInputChange方法的转换逻辑即可，修改后的完整代码如下：

const AddWidget = () => {
  const [form, setForm] = useState({ name: '', mfg: '', price: '', inStock: '' })

  function handleInputChange (e) {
    const { name, value } = e.target
    let processedValue = value
    // 仅数字字段且输入值非空时才做Number转换
    if ((name === 'inStock' || name === 'price') && value.trim() !== '') {
      processedValue = Number(value)
    }
    const newForm = {
      ...form,
      [name]: processedValue
    }
    setForm(newForm)
  }

  function handleFormSubmit (e) {
    e.preventDefault()
    // 如果后端要求数字字段不能为字符串，可在提交前统一处理空值为0或其他默认值
    const submitForm = {
      ...form,
      price: form.price === '' ? 0 : Number(form.price),
      inStock: form.inStock === '' ? 0 : Number(form.inStock)
    }
    addWidget(submitForm)
      .then((newWidget) => {
        console.log('newwidget', newWidget)
        setForm({ name: '', mfg: '', price: '', inStock: '' })
        return null
      })
      .catch(err => {
        console.error(err)
      })
  }

  return (
    <div className="ui container">
      <h2>Add New Widget</h2>
      <form className="ui form" onSubmit={handleFormSubmit}>
        <div className="field">
          <label htmlFor="name">Name:</label>
          <input type="text" name="name" value={form.name} onChange={handleInputChange} />
        </div>
        <div className="field">
          <label htmlFor="mfg">Manufacturer:</label>
          <input type="text" name="mfg" value={form.mfg} onChange={handleInputChange} />
        </div>
        <div className="field">
          <label htmlFor="price">Price</label>
          <input type="number" name="price" value={form.price} onChange={handleInputChange} />
        </div>
        <div className="field">
          <label htmlFor="inStock">Stock</label>
          <input type="number" name="inStock" value={form.inStock} onChange={handleInputChange} />
        </div>
        <button className="ui button">Add Widget</button>
      </form>
    </div>
  )
}

补充说明 #

• 输入阶段保留空字符串可以完全匹配number输入框的原生交互逻辑，用户清空输入时会正常显示为空
• 如果业务要求数字字段不能是空值，可以在表单提交阶段统一做空值的默认值转换，不会影响用户输入体验
• 代码中增加了trim()判断，可以避免用户输入全空格的异常情况

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