Question

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

我有一个带有提交按钮的嵌入式表单。除非用户在表单中输入了必填详细信息，否则此按钮将被禁用。

我要实现的目标如下：

当用户将鼠标悬停在禁用按钮上时（即他尚未填写必填详细信息），应该显示tooltip。
他填写必填项时，工具提示将不再显示在“提交”按钮上。

我正在如下使用Reactstrap UncontrolledTooltip组件

    <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状态，我会根据是否填写了所有必填项来进行切换。

但是，正在发生的情况是，将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用作工具提示）任何帮助将不胜感激。

谢谢。

Answer 1

您的代码中有两个问题，

1。

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

这是您期望的悬停行为，但是您需要更新onClick = {this.submit}函数以启用悬停-使用正确的事件列表。

您的逻辑呈现应为or，但您使用的是case，例如：

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

{this.state.submitButtonDisabled吗？：“在这里是是，您的案例代码”“：'在这里，您不可以使用案例代码'}在您的情况下，任何案例都不为空。

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

Answer 2

显然你不能将一个函数绑定到禁用。 disabled={this.state.submitButtonDisabled()} 应该可以解决问题

根据按钮的状态启用/禁用Reactstrap工具提示

2 个答案: