格式 DD/MM/YYYY 输入响应用户类型

IT技术 javascript reactjs input ecmascript-6
2021-05-16 04:49:36

我在 React 组件中有一个输入框。这是为了获取出生日期。我想/在每个相关部分之后添加。IE30/03/2017

类似的东西，但出生日期而不是信用卡号码。

用户应该输入30，然后它应该自动添加/. 这适用于我当前的代码，但是，它在每 2 位数字后输入一个斜线，但是，对于年份，它也在每第二个数字后添加斜线。

请参阅下面的完整 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}/>
    );

  }

}
3个回答

您可以onKeyDown在输入上设置事件并检测是否按下backspace。同样，您也可以删除它。我demonstrated在下面的代码段中有退格。

class DateInput extends React.Component {

  constructor(props) {
    super();
    this.handleChange = this.handleChange.bind(this);
     this.keyPressFunc = this.keyPressFunc.bind(this) 
    this.state = {
      value: ''
    }

  }
  keyPressFunc(e) {
   
    if(e.which === 8) {
      var val = this.state.value;
      console.log(val);
      if(val.length == 3 || val.length == 6) {
          val = val.slice(0, val.length-1);
          console.log(val)
          this.setState({value: val})
      }
    }
  }

  handleChange(e) {
    var val = e.target.value;
      console.log('called', val)
      if (val.length === 2) {

        val += '/';

      } else if (val.length === 5) {

        val += '/';

      }

      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} onKeyDown={this.keyPressFunc}/>
    );

  }

}
ReactDOM.render(<DateInput/>, document.getElementById('app'));
<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>
<div id="app"></div>

您的问题： 您的代码中的问题出在 handleChange 函数中。当您尝试删除“/”时，该函数将被调用（因为它绑定到 onChange）并再次添加一个新的“/”。

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

由于我不知道您的应用程序最终在做什么，因此我无法在这里给出直接的答案。如果您的页面/应用程序不仅在美国而且在世界各地使用，我强烈建议您使用众多插件之一来处理您的格式问题。

例如：https : //github.com/RobinHerbots/Inputmask 演示在这里：http : //robinherbots.github.io/Inputmask/

希望这可以帮助。祝你好运，不要对日期输入感到沮丧（我去过那里;））

您可以使用 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>

其它你可能感兴趣的问题
上一篇react Redux 混乱 下一篇如何防止用户在react中输入负数？