title: Allow only numbers in Input in React (antd styling)
body: <p>I know type=number works but that is not what i want.
  <strong>my HTML:</strong></p>
  
  <pre><code>&lt;FormItem style={{ display: "inline-block" }}&gt;
      {getFieldDecorator('matchPercentage', {
          initialValue: this.state.matchPercentage
       })( 
          &lt;Input type="number" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} /&gt;
       )}
  &lt;/FormItem&gt;
  </code></pre>
  
  <p><strong>my Function:</strong></p>
  
  <pre><code>handlePercentMatch = (e) =&gt; {
      const isInteger = /^[0-9]+$/;
      if (e.target.value === '' || isInteger.test(e.target.value)) {
        this.setState({ matchPercentage: e.target.value })
      }
    }
  </code></pre>
  
  <p>My <code>isInteger.test()</code> is working meaning I am able to get only integers in <code>matchPercentage</code> in state. But the problem is It is not reflecting in GUI. I am still able to type alphabets even though they are not being set into state.</p>
  
  <blockquote>
    <p>I know type="number" works but that is not what i want. I want to validate using react as i want control decimals and upto how many digits and non negative</p>
  </blockquote>
  
  <p>I have added my code here
  <a href="https://codepen.io/DadyByte/pen/xYgLvy?editors=1010" rel="noreferrer">https://codepen.io/DadyByte/pen/xYgLvy?editors=1010</a></p>
  
  <blockquote>
    <p>I found the root cause. If you use <code>FormItem</code> you will be allowed to type no matter what. If I use <code>Input</code> outside FormItem my code is working. What can I do to prevent it</p>
  </blockquote>