Javascript 格式DD/MM/YYYY输入作为用户类型

我在React组件中有一个输入框。这是一个出生日期。我想在每个相关部分之后添加

/

。i、 e.

30/03/2017

用户应输入

30

，然后自动添加

/

。这适用于我当前的代码，但是，它在每两位数字后输入一个斜杠，然而，在这一年中，它在每两位数字后添加斜杠

请参阅下面完整的React组件

class DateInput extends Component {

  constructor(props) {

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    }

  }

  handleChange(val) {

    val = val.split('/').join('');
    val = val.match(new RegExp('.{1,2}', 'g')).join("/");

    this.setState({
        value: val
    });

  }


  render() {

    const {value} = this.state;
    const placeholder = 'DAY/MONTH/YEAR';

    return ( <input type = "text" value={value} placeholder={placeholder}
      onChange = {this.handleChange}/>
    );

  }

}

类DateInput扩展组件{
建造师（道具）{
this.handleChange=this.handleChange.bind（this）；
此.state={
值：“”
}
}
手柄更换（val）{
val=val.split（'/'）.join（''）；
val=val.match（新的RegExp（'.{1,2}'，g'））.join（“/”）；
这是我的国家({
值：val
});
}
render（）{
const{value}=this.state；
常量占位符='日/月/年'；
报税表（
);
}
}

您可以在输入端设置一个

onKeyDown

事件，并检测是否按下

退格键。同样，您也可以为delete执行此操作。我在下面的代码片段中演示了退格


class DateInput扩展了React.Component{
建造师（道具）{
超级（）；
this.handleChange=this.handleChange.bind（this）；
this.keyPressFunc=this.keyPressFunc.bind（this）
此.state={
值：“”
}
}
按键功能（e）{
如果（e.which==8）{
var val=this.state.value；
控制台日志（val）；
如果（val.length==3 | | val.length==6）{
val=val.slice（0，val.length-1）；
console.log（val）
this.setState（{value:val}）
}
}
}
手变（e）{
var val=e.目标值；
console.log（'called'，val）
如果（val.length==2）{
val+='/'；
}else if（val.length==5）{
val+='/'；
}
这是我的国家({
值：val
});
}
render（）{
const{value}=this.state；
常量占位符='日/月/年'；
报税表（
);
}
}
ReactDOM.render（，document.getElementById（'app'））
您的问题：
代码中的问题在于handleChange函数。当您尝试删除“/”时，会调用该函数（因为它绑定到onChange），并再次添加新的“/”

一般的日期输入：
日期输入可能非常棘手，因为各国的格式不同。不仅分隔符不同，而且日、月、年的顺序也不同

因为我不知道你的应用程序到底在做什么，所以我不能在这里给出一个直接的答案。如果您的页面/应用程序不仅在美国使用，而且在世界各地都会使用，我非常推荐使用众多插件中的一个来解决您的格式问题

例如：
此处演示：

希望这有帮助。祝你好运，不要对过时的输入感到沮丧（我已经去过了；）
你可以使用MaskInput：


var CustomInput=React.createClass({
render（）{
返回
}
})
类ShoppingList扩展了React.Component{
render（）{
返回(
卡号：
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

这是全部代码吗？更新的代码，但这应该是问题所需的全部内容。我想我找到了解决方法！检查我的answer@funcoding我不想再添加一个库tbh。谢谢，谢谢你的帮助谢谢@shubham！我还有另一个使用正则表达式的解决方案，我觉得它更整洁。你能演示我如何用正则表达式来解决这个问题吗？不幸的是，我不知道如何用正则表达式来解决这个问题。你能用正则表达式来解决吗？