在ReactJS中设置工具提示的可见性

Question

我正在使用工具提示在表单（模态）中显示验证消息。

我在表单中有一个取消按钮。当我单击取消按钮（以下图像中不包括取消按钮）并重定向到索引页面时，工具提示将保留在索引页面中，如下所示：

form.js中用于工具提示的代码

<div style={{ 'height': '46px', 'display': 'flex'}}>
  <label style={{ 'color': '#f5222d', 'paddingTop': '10px', 'fontFamily': 'SimSun'}}>*</label>&nbsp;
  <label style={{ 'width': '70px', 'paddingTop': '8px'}}>Customer Name:</label>
  <FormItem>
    {getFieldDecorator('Name', { initialValue: '', rules: [{ required: true, message: (
    <Tooltip visible={true} placement="topRight" title="Please Input Customer Name" /> ), }], })(
    <Input placeholder="Customer Name" style={{ 'width': '164px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation(); this.handleChange(0,e, 'Name')}}/> )}
  </FormItem>
</div>

index.js中“取消”按钮的代码

handleModelCancel = () => {
  this.setState({  isModelOpen:false });
}

有什么办法可以解决这个问题？

Answer 1

有很多方法可以解决此问题。以下是一些建议。 问题在于工具提示中的visible属性保持为真。

因此，首先，为可见设置属性

 <Tooltip visible={this.props.visible}/>

或者在重定向之前，将div的样式更改为显示：无。