我刚刚开始我的冒险之旅。
我只想进行数字验证。
我找到了很多解决方案,但是没有用。从这里我得到了解决方案Only numbers. Input number in React
我不知道这是怎么回事
这是我找到的带有附加解决方案的代码。
import React, { Component } from 'react';
import validator from 'validator';
export default class GetApp extends Component {
state = {
// creditId: '',
err: false,
name: '',
firstName: '',
lastName: '',
pesel: '',
productName: '',
value: ''
}
constructor(props) {
super(props);
this.state = {
creditId: ''
}
}
onChange = (e) => {
//this.setState({ creditId: e.target.value });
}
handleChange(evt) {
const creditId = (evt.target.validity.valid) ? evt.target.value : this.state.creditId;
this.setState({ creditId });
}
handleSubmit = event => {
event.preventDefault();
fetch(`http://localhost:8200/credit/getCredit/${this.state.creditId}`)
.then(res => {
if (res.ok) {
return res
}
}).then(res => res.json())
.then(data => {
this.setState({
err: false,
name: data.credit.name,
firstName: data.customer.firstName,
lastName: data.customer.lastName,
pesel: data.customer.pesel,
productName: data.product.productName,
value: data.product.value
})
})
.catch(err => {
console.log(err);
this.setState({
err: true
})
})
}
render() {
let content = null;
if (!this.state.err && this.state.creditId) {
content = (
<div>
<p>Name: {this.state.name}</p>
<p>First Name: {this.state.firstName}</p>
<p>Last Name: {this.state.lastName}</p>
<p>PESEL: {this.state.pesel}</p>
<p>Product Name: {this.state.productName}</p>
<p>Value: {this.state.value}</p>
</div>
)
}
return (
<form onSubmit={this.handleSubmit}>
<div className="container">
<h2>Get Credit</h2>
<label>Credit Number:</label>
<input type='text' name="creditId" value={this.state.creditId} pattern="[0-9]*" onInput={this.handleChange.bind(this)} />
<div>
<button type="submit">Submit</button>
<p>{this.state.err ? `Dont search: ${this.state.creditId}` : content}</p>
<div>
</div>
</div>
</div>
</form>
)
}
}
感谢帮助
答案 0 :(得分:0)
您还可以将输入类型更改为number
https://www.w3schools.com/tags/att_input_type_number.asp。除了数字(0-9)字符外,这将不允许用户设置其他任何内容,而且更加严格。