格式DD / MM / YYYY输入作为用户类型进行反应 [英] format DD/MM/YYYY input react as user types

问题描述

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

与此相似但与出生日期相反的信用卡号码。

用户应输入 30 然后它应该自动添加 / 。这适用于我当前的代码，但是，它在每2位数后输入斜杠，但是，在每一秒之后，它也会添加斜杠。

查看完整的React组件

  class DateInput extends Component {
 
构造函数（道具）{
 
 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 =textvalue = {value} placeholder = {placeholder} 
 onChange = {this.handleChange} /> 
）; 
 
} 
 
} 
  

解决方案

您可以使用MaskInput：
MaskedInput

div class =snippet-code>

  var CustomInput = React.createClass（{render（）{return< MaskedInput mask =11-11-1111placeholder =MM-DD-YYYYsize =11{... this.props} formatCharacters = {{'W'：{validate（char）{return / \w / .test（char）}，transform（char）{return char.toUpperCase（）}}}}} />}}）类ShoppingList扩展了React.Component {render（）{return（< div className =form-field >< label htmlFor =card>卡号：< / label>< CustomInput />< / div>）; }} ReactDOM.render（< ShoppingList />，document.getElementById（'root'））;  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js>< / script> < script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js>< / script>< script src =https：/ /unpkg.com/react-maskedinput@3.3.4/umd/react-maskedinput.js\"></script><div id =root>< / div>  

I have an input box in a React component. This is to take a date of birth. I want to add / after each relevant section. i.e. 30/03/2017

Something similar to this but for date of birth as opposed to credit card number.

The user should enter 30 and then it should automatically add the /. This works with my current code, however, it enters a slash after each 2 digits, however, for the year it adds the slash also after each second digit.

See complete React component below

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}/>
    );

  }

}

解决方案

You could use the MaskInput: MaskedInput

var CustomInput = React.createClass({
  render() {
    return <MaskedInput
      mask="11-11-1111"
      placeholder="MM-DD-YYYY"
      size="11"
      {...this.props}
      formatCharacters={{
        'W': {
          validate(char) { return /\w/.test(char ) },
          transform(char) { return char.toUpperCase() }
        }
      }
    }/>
  }
})

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="form-field">
        <label htmlFor="card">Card Number:</label>
        <CustomInput />
      </div>
    );
  }
}
ReactDOM.render(
  <ShoppingList />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-maskedinput@3.3.4/umd/react-maskedinput.js"></script>
<div id="root"></div>

这篇关于格式DD / MM / YYYY输入作为用户类型进行反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！