1

我正在使用 Reactstrap（版本 6.5.0）来设置我的 ReactJs 项目的样式。

我有一个带有提交按钮的内联表单。在用户在表单中输入必填详细信息之前，此按钮将被禁用。

我想要达到的目标如下：

  1. 当用户将tooltip鼠标悬停在禁用按钮上时（即他没有填写强制性详细信息），应向用户显示。
  2. 当他填写强制性详细信息时，工具提示不应再显示在提交按钮上。

我正在使用 ReactstrapUncontrolledTooltip组件如下

    <button id="submitButton" type="submit" onClick={this.onSubmit} className="btn" disabled={this.state.submitButtonDisabled}>Submit</button>
    { this.state.submitButtonDisabled &&
                  <UncontrolledTooltip placement="bottom" target="submitButton">
                       Please fill in the mandatory details
                  </UncontrolledTooltip>
     }

我的组件具有this.state.submitButtonDisabled状态，我根据是否填写了所有的mandory 字段来切换。

但是，正在发生的事情是在将tooltip鼠标悬停在禁用submit按钮上时未显示。它仅在我尝试单击禁用submit按钮几次时显示。此外，一旦填写了强制性详细信息并submit启用了按钮，tooltip即使在悬停时也会继续显示。

已编辑：我还注意到单击提交按钮还会在控制台中发出以下警告

     index.js:1452 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

如何使用 Reactstrap 实现预期的行为（我不想仅将 jquery 用于工具提示）任何帮助将不胜感激。

谢谢。

4

2 回答 2

0

您的代码中有两个问题，

1.

<button id="submitButton" type="submit" onClick={this.onSubmit} className="btn" disabled={this.state.submitButtonDisabled}>Submit</button>

这篇文章你期待一个悬停行为，但你有一个 onClick={this.submit} 函数需要更新以启用悬停 - 使用正确的 eventlistner。

  1. 你的逻辑渲染应该是一个或案例，但你正在使用和案例，例如：

{ this.state.submitButtonDisabled && } 应该实现为

{ this.state.submitButtonDisabled ？: "yes-your yes case code here": 'no-no case code here' } 在你的情况下 no case 为空。

希望能给您足够的提示来实施您的解决方案。

于 2018-12-12T21:21:29.120 回答
0

显然你不能将函数绑定到disabled。 disabled={this.state.submitButtonDisabled()}应该做的伎俩

于 2021-03-02T11:02:28.560 回答