Закрыть MessageBar Office-UI-ткань от другого компонента - PullRequest
Новая
       35

Закрыть MessageBar Office-UI-ткань от другого компонента

0 голосов
/ 10 июля 2019

Был задан похожий вопрос, но это не то же самое.Ref1: Как закрыть панель сообщений об ошибках компонента Office Office Fabric? Ref2: Панель Office Office UI не будет закрыта

Хотя мой вопрос заключается в следующем.Я добавляю MessageBars через родительский компонент Reduce and Push.Я переместил _onDismiss в parent и индексирую правильный MessageBar, когда нажимаю кнопку «Закрыть».Но как мне удается как удалить его из массива, так и закрыть его?

РЕДАКТИРОВАТЬ: мне удалось удалить из массива, а также из списка в Интернете.Единственная проблема заключается в том, что я все еще сохраняю последнее добавленное состояние (от родителя MessageList).Я работаю над исправлением, чтобы удалить последний элемент.

БОНУСНЫЙ вопрос: Как я могу добавить таймер к информации и успеху, но не к ошибке?

Мне пришлось перейти от карты к уменьшению, так как мой код был переполнен повторениями, так как я не удаляю из массива.Если я сделаю то же самое, что и в предыдущих сообщениях stackoverflow, все равно будет удалено.

allFeedback - это массив объектов, содержащих сообщение обратно пользователю и типа «error», «success» или «info»

Parent: 

export def......
  super(); 
    this.state = {
      containerRef: React.createRef(),
      allFeedback: [],
    }
  } 

  _onDismiss = (index) => (ev) =>   {
    const allFeedback = this.state.allFeedback;
    allFeedback.splice(index, 1);
    allFeedback.pop();
    this.setState({ allFeedback });
  }

  <Portal>
    <MessageBox ref={this.state.containerRef}>
      {allFeedback.reduce((result, current, index) => {
        if (index < 15) {
          result.push(
            <Message 
             key={index}
             index={index} 
             message={current.message} 
             type={current.type}
             _onDismiss={this._onDismiss}
           />
         );
       }
      return result;
    }, [])}
    {/* Commented out code that breaks code with lots of repeats
      allFeedback.map((entry, index) => { 
        return <Message 
                 key={index} 
                 message={entry.message} 
                 type={entry.type} 
                />
        })
    */}
  </MessageBox>
</Portal>

ChildКомпонент одинаков для всех, но разные проверки, чтобы увидеть, какой из них добавить на экран.

{type === info ? (
  <StackItem>
    <MessageBar
      onDismiss={_onDismiss(index)}
      dismissButtonAriaLabel="Close"
    >
      {message}
    </MessageBar>
  </StackItem>
) : null}

Я должен удалить его, когда нажму кнопку «Закрыть», а также удалить его из массива.Но так как я не могу сделать это - я застрял с петлями, увеличивающимися до 30 после 3-4 щелчков.Это также, почему я добавил if в коде.Но когда я собираюсь добавить таймер, было бы неплохо сделать так, чтобы таймер удалил его из массива.

РЕДАКТИРОВАТЬ: мне удалось удалить из массива, а также веб-скод под _onDismiss

1 Ответ

0 голосов
/ 11 июля 2019

решено

Чтобы удалить дубликат, я проверил, чтобы он не прошел дважды.

  componentDidUpdate(prevProps, prevState) {
    if(this.props.feedback.message !== prevProps.feedback.message) {
      this.state.allFeedback.push(this.props.feedback)
    }
  }

Это сделало так, что _onDismiss допустил ошибку, поэтому я просто очистил его 

  _onDismiss = (index) => () =>   {
    const allFeedback = this.state.allFeedback;
    allFeedback.splice(index, 1);
    this.setState({ allFeedback });
  }
...