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