1

我在一个基于 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();
    });
  };

还有一个 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}
                          />

这不起作用，但我不确定发生了什么？

4

1 回答 1

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")
      );
    }
  }

正如@an0nym0us 提到的那样，PlasdisabledSubmit嵌套在controls.

另外，在旁注中，您调用一个设置状态的函数似乎有点奇怪，只是调用另一个在该函数内设置状态的函数，作为设置状态的回调（inputChangedHandler调用disabledSubmitHandler'). It seems you could call that disabled check from withininputChangedHandler passing it yourupdatedControls , and return true/false fordisabledSubmit , resulting in a single call tosetState`

于 2019-05-14T14:48:32.387 回答