چطور میشه در textfield فقط اجازه وارد کردن عدد داد

اینجوری:

<input type="text" onkeypress="return /[0-9]/i.test(event.key)">

یک راه تغییر. Type به نامبر بود که تو ری اکت نمیشه
<input type='number' />
راه حل اینجوری :

<input value={this.state.Goal} onChange={event => this.setState({Goal: event.target.value.replace(/\D/,'')})}/>

ورودی متنی رو بالا نوشتم، در صورتی که نوع ورودی رو بشه عددی گذاشت:

<input type="number" id="quantity" name="quantity">

تایپ کردن داخل فیل های Input یک Event یا رویداد در جاوااسکریپت حساب میشه.
میتونی اون رویداد رو مدیریت کنی

داخل React هم کم و بیش همینه..
میشه از رویداد onChange استفاده کرد

class App extends React.Component{
   constructor(){
  super();
  this.state = {value: ''};
  this.onChange = this.onChange.bind(this)
   }

   onChange(e){
  const re = /^[0-9\b]+$/;
  if (e.target.value === '' || re.test(e.target.value)) {
     this.setState({value: e.target.value})
  }
   }

   render(){
 return <input value={this.state.value} onChange={this.onChange}/>
   }
}

ReactDOM.render(<App/>,document.getElementById('app'))

توی متد onChange میتونی با regular expression اعداد فارسی و غیره هم چک کنی.

مثال زیر هم استفاده از Hook هارو نشون میده:
https://codesandbox.io/s/adoring-minsky-9sqvv

@ali.bayat
ببخشید مهندس، من با ری اکت آشنایی ندارم، ولی می خواستم ببینم پاسخی که من نوشتم ایرادی درونش هست؟
میشه بررسی کنیدش؟
این پاسخ: https://roocket.ir/discuss/12370#subject-44068

@milad
درود
خیر اتفاقا راه درستی هست.

ری اکت هم همینه، فقط کاستوم اونت های خودش رو هم داره
و ترجیحا هم لاجیک رو میذارن داخل یه تابع و اون رو به Instance بایندش میکنند

@ali.bayat
ممنون از توجه تون مهندس بیات 👌