防ぎ、ユーザー、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プロパティを追加したいですユーザーが小数点以下3桁の浮動小数点数を入力するようにします。

ユーザーが次のような番号を入力した場合：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(); 
    } 
}