Question

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

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

用户应输入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}/>
    );

  }

}

Answer 1

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

Answer 2

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

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 3

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

日期输入： 日期输入可能非常棘手，因为格式因国家/地区而异。不仅分离器而且日，月和年的顺序也不同。

由于我不知道你的应用程序到底做了什么，所以我不能在这里直截了当地回答。如果您的页面/应用程序不仅会在美国使用，而且会在全球范围内使用，我建议您使用其中一个插件来处理格式问题。

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

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

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

3 个答案: