Настройка видимости всплывающей подсказки в ReactJS - PullRequest
Новая
       14

Настройка видимости всплывающей подсказки в ReactJS

0 голосов
/ 07 декабря 2018

Я использую всплывающую подсказку для отображения сообщения проверки в моей форме (которая является модальной).enter image description here

У меня есть кнопка отмены в форме.Когда я нажимаю кнопку Отмена ( Кнопка отмены не включается в изображения, представленные ниже ) и перенаправляется на страницу индекса, подсказка остается на странице индекса, как показано: enter image description here

Код, используемый для всплывающей подсказки в 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 });
}

Есть лиспособ решить эту проблему?

1 Ответ

0 голосов
/ 07 декабря 2018

Есть много способов решить эту проблему. Вот несколько предложений.Проблема в том, что свойство visible в подсказке остается истинным.

Итак, сначала установите свойство для visible 

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

Или перед перенаправлением измените стиль отображения div: none.

...