Question

我是前端和javascript的新手。我正在使用react js。这里，我有一个类似于->

的按钮

<div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  title={this.generateToolTipMessage(this.state.hasAllFieldsFilld, this.state.hasAllHLowFieldsFilled, this.state.hasAllMidFieldsFilled)}>
                    <button className="btn btn-primary fetchBtnSize" disabled={(this.state.disableFetch || this.state.disableHighetch || this.state.disableMidFetch) || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
                </div>

现在，在工具提示上，我必须向用户显示一些消息，因此我编写了类似于的功能，

generateToolTipMessage(highData, lowData, mediumData) {
        let errorMessages = [];
        if(highData) {
            errorMessages.push("Please fill all the details in the High Level Criteria");
        } 
        if(lowData) {
            errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
            errorMessages.push("Please fill all the details in the Medium Level Criteria");
        }
        return errorMessages;
    }

现在，就像，一次可以有3条消息，也可以是2条，也可以是1条。因此，现在我想向用户显示此消息。

我没有办法做到吗？有人可以建议我该怎么做吗？谢谢。任何提示都会有所帮助。

Answer 1

state={
errors: '',
}

onMouseOverEventTriggered = () => {
       let errorMessages = [];
       if(highData) {
        errorMessages.push("Please fill all the details in the High Level Criteria");
       } 
          if(lowData) {
        errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
        errorMessages.push("Please fill all the details in the Medium Level 
       Criteria");
    }
  this.setState({
  errors: errorMessages,
  })
}

现在是HTML部分

 <div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  
   title={this.state.errors} onMouseOver={this.onMouseOverEventTriggered}>
                <button className="btn btn-primary fetchBtnSize" disabled= 
    {(this.state.disableFetch || this.state.disableHighetch || 
   this.state.disableMidFetch) 
    || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( 
    this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
            </div>

在数组中的工具提示中显示消息

1 个答案: