React JS中如何获取type为number的input输入框的值？

注意：type为number的输入框，DOM原生返回的value默认是字符串类型，必须手动做类型转换才能得到数值类型的结果

你可以根据自己的组件写法选下面两种实现方式：

受控组件实现（官方推荐写法） #

受控组件将输入框值与组件状态绑定，输入时实时同步状态，需要取值时直接读取状态即可，适合需要实时校验、联动的表单场景：

import { useState } from 'react';

export default function NumberForm() {
  const [inputNum, setInputNum] = useState(0);

  const handleChange = (e) => {
    // 空输入时兜底处理，避免转数字出现异常
    const val = e.target.value.trim() === '' ? 0 : Number(e.target.value);
    setInputNum(val);
  }

  const handleSubmit = () => {
    // 直接取状态值即可
    var x = inputNum;
    console.log(x, typeof x); // 输出数值类型的结果
  }

  return (
    <div>
      <input type="number" value={inputNum} onChange={handleChange} />
      <button onClick={handleSubmit}>获取输入值</button>
    </div>
  )
}

非受控组件实现（Ref直接取DOM） #

如果是简单场景不需要实时同步输入状态，可以用ref直接挂载到输入框DOM上，需要取值时直接读取DOM属性，代码更简洁：

import { useRef } from 'react';

export default function NumberForm() {
  const numberInputRef = useRef(null);

  const handleSubmit = () => {
    // 从ref绑定的DOM上取值，同样要做类型转换
    const rawVal = numberInputRef.current.value;
    var x = rawVal.trim() === '' ? 0 : Number(rawVal);
    console.log(x, typeof x);
  }

  return (
    <div>
      <input type="number" ref={numberInputRef} defaultValue={0} />
      <button onClick={handleSubmit}>获取输入值</button>
    </div>
  )
}

常见踩坑提示 #

• 未做类型转换直接计算会出现隐式转换bug，比如字符串'3' + 2会得到'32'而非数值5
• 输入框被用户清空时，拿到的value是空字符串，直接转数字会得到0，如果你需要区分「未输入」和「输入0」的场景，可以把空值兜底为null或者自定义标识
• 如果使用类组件，逻辑完全一致，只需要把useState替换为类组件的this.state、useRef替换为createRef即可，核心取值逻辑没有差异

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