在js输入

Question

我的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位数字。如下所示，  

以下是我的问题，

当我尝试调试它时，在key up事件中，它将处理更改函数，但e.target.value为“”，但根据我的说法，它应该具有值23231.它是如何“”？

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

Answer 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事件都应该已经通知您。