Реактивировать установленную кнопку в отключенное состояние

Question

Я нахожусь в компоненте React на основе класса и свойстве моего состояния, например:

  state = {
    controls: {
      email: {
        validation: {
          required: true,
          isEmail: true
        },
        invalid: false,
      },
      password: {
        validation: {
          required: true,
          minLength: 6
        },
        invalid: true,
      },
      disabledSubmit: true,
    }
  };

У меня есть inputChangedHandler, запущенный из компонента ввода:

  inputChangedHandler = (event, controlName) => {
    console.log("[STATE]", this.state.controls);
    const updatedControls = {
      ...this.state.controls,
      [controlName]: {
        ...this.state.controls[controlName],
        value: event.target.value,
        invalid: !this.checkValidity(
          event.target.value,
          this.state.controls[controlName].validation
        )
      },
      touched: true
    };

    console.log("[UPDATEDCONTROLS]", updatedControls);
    this.setState({ controls: updatedControls }, () => {
      this.disabledSubmitHandler();
    });
  };

Иa disabledSubmitHandler, который должен вызываться из моего inputChangedHandler:

  disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid &&
      !this.state.controls["password"].invalid
    ) {
      this.setState(
        { disabledSubmit: true },
        console.log("[DISABLEDHANDLER] TRUE")
      );
    }
  }

Пропорция установлена ​​на моем компоненте кнопки в моем JSX следующим образом:

<Button
                            value="submit"
                            clicked={this.submitHandler}
                            disabled={this.state.disabledSubmit}
                          />

Это не работает, ноЯ не уверен, что происходит?

Answer 1

Я думаю, что, возможно, этот бит нуждается в исправлении:

disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid && //if email is not invalid
      !this.state.controls["password"].invalid //if password is not invalid
    ) {
      this.setState(
        { disabledSubmit: true },
        console.log("[DISABLEDHANDLER] TRUE")
      );
    }
  }

Этот код говорит, что если адрес электронной почты и пароль действительны , отключите ввод.Я думаю, что это должно быть:

disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid &&
      !this.state.controls["password"].invalid
    ) {
      this.setState(
        { disabledSubmit: false },
        console.log("[DISABLEDHANDLER] FALSE")
      );
    }
  }

Plas, как упомянуто @ an0nym0us, disabledSubmit вложено в controls.

Кроме того, на боковой ноте кажется немного странным, чтоВы бы вызвали функцию, которая устанавливает состояние, только для вызова другой функции, которая устанавливает состояние внутри этой функции, в качестве обратного вызова для установки состояния (inputChangedHandler вызов disabledSubmitHandler'). It seems you could call that disabled check from within inputChangedHandler passing it your updatedControls , and return true/false for disabledSubmit , resulting in a single call to setState`