چطور میشه در textfield فقط اجازه وارد کردن عدد داد
سلام رفقا..اخر هفته همگی خوش
اقا من یه پروژ react دارم که از material ui استفاده میشه و بچه های تحلیل گیر دادن که حتما text fied عدد وارد بشه و کاربر جز عدد نتونه چیزی وارد کنه ..
اگر کسی ایده یا نظری داره دراین مورد خوشحال میشم که با من به اشتراک بزاره
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
یک راه تغییر. 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