ReactJS - состояние не обновляется с полной проверкой формы - PullRequest
Новая
       5

ReactJS - состояние не обновляется с полной проверкой формы

0 голосов
/ 01 февраля 2020

Пытаясь пройти полную проверку формы и избегать jQuery для неправильных c проверок и пытаясь сделать все через реакцию. Я пытаюсь выполнить следующую динамическую проверку.

Это проверка проверки. Я пытаюсь приступить к работе, где она будет проверять, является ли поле обязательным, если оно истинно, и оно пустое (клиент пропустил обязательное поле). ), установите в значение error и затем рендер должен его забрать. По какой-то причине мое установленное состояние не выполняется.

, если это имеет значение, я называю это validationOfInputs (), чтобы вернуть логическое значение, чтобы увидеть, прошел ли этот полный тест. 

validationOfInputs() {
    let allRequiredFieldsPresent = true;

    for (const i in this.state.formControls) {
        if (this.state.formControls[i].required === true) { // THIS CHECK IS WORKING GREAT
            if (this.state.formControls[i].value === "") { // THIS CHECK IS ALSO WORKING GREAT
                this.setState({ // THIS DOES NOT APPEAR TO EVEN FIRE
                    formControls:
                    {
                        ...this.state.formControls,
                        [i]:
                        {
                            ...this.state.formControls[i],
                            error: true
                        }
                    }
                }
                console.log("ERROR BLANK ENTRY DETECTED ON: " + i);
                console.log(this.state.formControls[i]);
                allRequiredFieldsPresent = false;
            }
        }
    }
    return allRequiredFieldsPresent;
}

Мое состояние настроено следующим образом: 

this.state =
    {
        COMPANY_LIST: [],
        submitted: false,
        error: false,
        formControls: {
            customerName:       { value: "", error: false, required: true },
            address1:           { value: "", error: false, required: true },
            address2:           { value: "", error: false, required: false },
            city:               { value: "", error: false, required: true },
            zip:                { value: "", error: false, required: true },
...

Мое обновление работает очень хорошо для редактирования в реальном времени: 

    handleChange(e) {
        let { name, value, type, checked } = e.target;
        value = (type === 'checkbox' ? checked : value);
        this.setState({
            formControls:
            {
                ...this.state.formControls,
                [name]:
                {
                    ...this.state.formControls[name],
                    value
                }
            }
        });
    }

Наверное, поэтому я застрял. Я могу вызвать установленное состояние для демонстрационной кнопки, и использование имен напрямую работает отлично. Использование handleChange также прекрасно работает. Однако, когда я пытаюсь заставить валидатор работать, он просто не запускает setState. 

this.setState({
        formControls:
        {
            ...this.state.formControls,
            customerName: {
                ...this.state.formControls.customerName,
                value: company_name
            },
            address1: {
                ...this.state.formControls.address1,
                value: "123 Apple St."
            },
            city: {
                ...this.state.formControls.city,
                value: "NY"
            },
            ...

Для справки, мой рендер выполняет следующие действия: 

render (
...
className={
    "form-control" +
    ((this.state.formControls.customerName.error) ? " highlight_error" : "")
}

Любая помощь по этому вопросу будет принята с благодарностью.

...