我在 React/Reactstrap 中有一个验证函数，我正在将其应用于多个字段，但是所有字段都同时进行验证

Question

这是我到目前为止的代码(只是相关的部分，我还使用了可用性reatstrap验证，仅供参考(：

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%确定如何更改语法，只验证我键入的字段。

希望这是有道理的！我相信这是相当基本的改变，我只是一个新手，正在学习，所以我不能完全获得正确的语法。

非常感谢！

Answer 1

首先，您的textState需要两个不同的字段，否则它们共享相同的字段：

this.state = {
data: [],
toolPlatform: [],
workstream: [],
opsarea: [],
campus: [],
riskcat: [],
activeItem: this.props.activeItem,
validate: {
textState: {
title: '',
description: '',
},
},
};

然后检查e.target.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.target.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
/>