到目前为止,这是我的代码(仅是相关部分,我也仅使用FYI来使用availability-reactstrap-validation:]:
export default class CustomModal extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
toolPlatform: [],
workstream: [],
opsarea: [],
campus: [],
riskcat: [],
activeItem: this.props.activeItem,
validate: {
textState: '',
},
};
}
validateText(e) {
const textRex = /^(?!\s*$).+/;
const { validate } = this.state
if (textRex.test(e.target.value)) {
validate.textState = 'has-success'
} else {
validate.textState = 'has-danger'
}
this.setState( {validate})
};
render() {
const { toggle, onSave } = this.props;
return (
<Modal isOpen={true} toggle={toggle}>
<ModalHeader toggle={toggle}> Tool Details </ModalHeader>
<ModalBody>
<AvForm onValidSubmit = {() => onSave(this.state.activeItem)}>
<FormGroup>
<Label for="title">Title</Label>
<AvInput valid
type="text"
name="title"
value={this.state.activeItem.title}
//onChange={this.handleChange}
placeholder="Tool Name"
valid={ this.state.validate.textState === 'has-success' }
invalid={ this.state.validate.textState === 'has-danger' }
onChange={ (e) => {
this.validateText(e)
this.handleChange(e)
}}
required
/>
</FormGroup>
<AvGroup>
<Label for="description">Description</Label>
<AvInput valid
type="text"
name="description"
value={this.state.activeItem.description}
valid={ this.state.validate.textState === 'has-success' }
invalid={ this.state.validate.textState === 'has-danger' }
placeholder="Tool description"
onChange={ (e) => {
this.validateText(e)
this.handleChange(e)
}}
required
/>
验证有效,但是当我开始在其中一个字段中输入内容时,两个字段将同时验证。这是有道理的,我知道为什么会这样做,但是我不确定100%如何更改语法以仅验证我输入的字段。
希望如此!我确信更改是相当基本的,我只是新手,正在学习,所以我不太能掌握正确的语法。
非常感谢!
this.state = {
data: [],
toolPlatform: [],
workstream: [],
opsarea: [],
campus: [],
riskcat: [],
activeItem: this.props.activeItem,
validate: {
textState: {
title: '',
description: '',
},
},
};
然后检查e.name以确定要更新的textState字段(您也可以在此函数中将其作为参数传递)
validateText ( e ) { const textRex = /^(?!\s*$).+/; // If test is true / false const fieldTextState = textRex.test( e.target.value ) ? 'has-success' : 'has-danger' // Create textState object with all the fields const textState = Object.assign( {}, this.state.validate.textState, { [ e.name ]: fieldTextState}) this.setState( { validate : { textState } } ) };
还要为每个输入设置特定的有效和无效
<AvInput valid type="text" name="title" value={ this.state.activeItem.title } //onChange={this.handleChange} placeholder="Tool Name" valid={ this.state.validate.textState.title === 'has-success' } invalid={ this.state.validate.textState.title === 'has-danger' } onChange={ ( e ) => { this.validateText( e ) this.handleChange( e ) } } required />
和
<AvInput valid type="text" name="description" value={ this.state.activeItem.description } valid={ this.state.validate.textState.description === 'has-success' } invalid={ this.state.validate.textState.description === 'has-danger' } placeholder="Tool description" onChange={ ( e ) => { this.validateText( e ) this.handleChange( e ) } } required />