【发布时间】：2018-11-04 17:46:37
【问题描述】：
我使用 React 创建了以下带有验证的表单：
- 数据应在输入时进行验证
- 提交前需再次验证数据
- 所有数据所有字段均为必填且数据有效
这个程序有效，但我有以下问题：
我使用 onBlur 监控数据检查，但是当用户在第一个字段中输入无效数据以及第一个字段的错误消息（“仅字母”）时，会显示第二个字段的错误消息（“此字段是必需”）。
如何改进我的示例：
- 在输入时 - 仅当用户触摸特定字段时才会显示错误消息（“此字段是必需的”或针对无效数据的特定消息）
- 如果按下“提交”按钮 - 则错误消息应显示在所有包含无效数据的字段附近
我的代码：
const ErrorOutput = ({ error }) => <span>{error}</span>
class FormItem extends React.Component {
render() {
return (
<div>
<label>
{this.props.label}
</label>
<input
{...this.props.input}
/>
{this.props.error && <ErrorOutput error={this.props.error} />}
</div>
);
}
}
class App extends React.Component {
constructor(props){
super(props)
this.state = {
firstName: '',
telNo: '',
submit: false,
errors: {
firstName: '',
telNo: '',
},
invalid: false,
}
}
handleSubmit(e){
e.preventDefault()
if (this.validate()) {
console.log('Error!')
} else {
console.log('Success!')
}
}
validate = () => {
const { firstName, telNo } = this.state
const errors = {}
let invalid = false;
if (firstName === '') {
errors.firstName = 'first name is required'
invalid = true;
} else if (!firstName.match(/^[a-zA-Z]+$/)) {
errors.firstName = 'Letters only'
invalid = true;
}
if (telNo === '') {
errors.telNo = 'Phone is required'
invalid = true;
} else if (!telNo.match(/^[0-9]+$/)) {
errors.telNo = 'Numbers only'
invalid = true;
}
this.setState({
invalid,
errors,
})
return invalid;
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<FormItem label='First name:' input={{
type: 'text',
name: 'firstName',
value: this.state.firstName,
onChange: e => this.setState({ firstName: e.target.value }),
onBlur: () => this.validate(),
}} error = {this.state.errors.firstName}
/>
<FormItem label='Phone number:' input={{
type: 'tel',
name: 'telNo',
value: this.state.telNo,
onChange: e => this.setState({ telNo: e.target.value }),
onBlur: () => this.validate(),
}} error = {this.state.errors.telNo}
/>
<button>
Submit
</button>
</form>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<body>
<div id="root"></div>
</body>【问题讨论】：
-
如果你为此创建了jsfiddle，它会很容易检查
标签： forms reactjs validation jsx