Question

我有一个输入字段使用与此代码作出反应：

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

我想添加一个validation或更好的preventDefault属性，这样它就不会让用户输入一个超过三个小数点的浮点数。

如果用户输入如下数字：1.234，即使在键盘上打字，也应阻止用户输入更多数字。关于如何实现这个的任何想法？

Answer 1

与其他人建议的一样，使用onKeyDown事件来限制输入。快速而肮脏的例子：https://jsfiddle.net/bv9d3bwk/2/

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      onKeyDown={this.onKeyDown}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

const onKeyDown = (e) => {
    const decimal_index = e.target.value.indexOf('.');
    if(decimal_index > -1){
        var decimals = e.target.value.substring(decimal_index, e.target.value.length+1);
        if(decimals.length > 4 && e.keyCode !== 8){
           e.preventDefault();
        }
        //this.props.onChange();
    }
}

阻止用户输入大于3位小数的浮点数

1 个答案: