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

Question

到目前为止，这是我的代码（只是相关部分，我也在使用availity-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% 确定如何更改语法以仅验证我输入的字段。

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

非常感谢！

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
                        />