React受控组件中如何阻止短横线（KeyCode189）输入输入框？

我希望阻止用户在输入框中输入短横线（"-"），该字符对应的KeyCode为189。以下是我的代码：

import React, { useEffect, useState } from "react"

interface Props {
  value: string
}

function InputFormat(props: Props) {
  const [stateValue, setStateValue] = useState(() => value)

  const handleChange = (event: any) => {
    setStateValue(event.target.value)
  }

  const handlekeyDown = (event: any) => {
    if (event.keycode === 189) {
      return
    }
  }

  return (
    <>
      <input
        onKeyDown={(e) => handlekeyDown(e)}
        value={stateValue}
        onChange={(e) => handleChange(e)}
      />
    </>
  )
}

export default InputFormat

这段代码未达到预期效果，我尝试在检测到KeyCode为189时直接return，但仍然能输入短横线。请问在这个受控组件中该如何实现需求？

你的代码存在两个核心问题，修正后即可实现需求：

1. 属性名大小写错误：event.keycode需改为event.keyCode（注意C为大写），JavaScript属性名区分大小写，这是导致按键检测逻辑失效的直接原因。
2. 未阻止默认输入行为：仅return不会终止浏览器的默认输入动作，必须调用event.preventDefault()来取消该按键的默认行为。

另外，仅通过键盘事件拦截有漏洞——用户可通过粘贴、拖拽等方式插入短横线，建议同时在onChange事件中过滤非法字符，确保覆盖所有输入场景，同时保持受控组件的数据流一致性：

优化后的完整代码：

import React, { useState } from "react"

interface Props {
  value: string
  onChange: (value: string) => void // 补充回调同步父组件状态
}

function InputFormat(props: Props) {
  const [stateValue, setStateValue] = useState(props.value)

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // 过滤所有短横线
    const filteredValue = event.target.value.replace(/-/g, "")
    setStateValue(filteredValue)
    props.onChange(filteredValue) // 同步状态到父组件
  }

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    // 同时检测keyCode和key值，兼容性更好（keyCode已被标记为废弃）
    if (event.keyCode === 189 || event.key === '-') {
      event.preventDefault()
    }
  }

  return (
    <input
      onKeyDown={handleKeyDown}
      value={stateValue}
      onChange={handleChange}
    />
  )
}

export default InputFormat

关键说明 #

• 用event.key === '-'替代单一依赖keyCode：keyCode属于已废弃API，直接检测按键字符的兼容性更强。
• onChange中过滤字符：覆盖键盘输入、粘贴、拖拽等所有输入场景，确保输入框内容始终不含短横线。
• 补充Props的onChange回调：受控组件需将内部状态同步给父组件，保证数据流的单向一致性。

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