在反应js输入中将年份值限制为4位答案

【问题标题】：Restrict year value to 4 digit in react js input在反应js输入中将年份值限制为4位
【发布时间】：2016-10-25 14:12:38
【问题描述】：

我的 jsx 文件中有以下代码和 react 组件，

  <input
        data-auto={this.props.name}
        name={this.props.name}
        type='date'
        value={this.props.date}
        onChange={this.handleChange}
        onKeyUp={this.handleChange}>

 handleChange(e) {
    const eventValue = e.target.value;
 }

当我通过键盘更改年份值时，我可以给出最多 6 位的数字。如下所示，

以下是我的问题，

当我尝试调试它时，在按键事件中，它将执行handleChange函数，但e.target.value是“”，但按照我的说法，它的值应该是23231。它是“”？

我必须将年份值限制为 4 位数字。怎么办？

【问题讨论】：

标签： date input reactjs

【解决方案1】：

如果您只想要年份，那么 type='date' 是错误的值，因为它要求您输入 day、month 和 year。由于year 由n 数字组成（在您的情况下为4），我们可以使用type='number' 并将允许的值限制为1000-9999。

const onChange = (e) => {
  console.log("change", e.target.value)
}

const onKeyUp = (e) => {
  console.log("keyUp", e.target.value)
}

const InputExampleInput = () => <input 
  placeholder='Search...'
  type='number'
  min={1000}
  max={9999}
  onChange={onChange}
  onKeyUp={onKeyUp}
  />

使用键盘上的up 和down 箭头，输入被限制为min 和max 值，因此限制为4 位数。由于用户仍然可以手动输入超出此范围的值，因此您必须在处理程序中进行一些输入验证。

我不确定你为什么要为KeyUp 事件注册一个处理程序，因为Change 事件应该已经在值更改时通知你。

【讨论】：