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

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