从其他组件关闭 MessageBar Office-UI-fabric

Question

类似的问题有人问过，但不一样。参考 1：参考文献 2：Office ui fabric panel won't close

我的问题如下。我通过父组件中的减少和推送添加 MessageBars。我已将 _onDismiss 移至父级，并且在我用鼠标单击 'close' 按钮时正在为正确的 MessageBar 建立索引。但是我如何设法将它从数组中删除并关闭它呢？

编辑：我已经设法从数组中删除，也从网络上的列表中删除。唯一的问题是我仍然保留最后添加的状态（来自 MessageList 的父级）。我正在修复以删除最后一个元素。

奖金问题：如何将计时器添加到信息和成功，而不是错误？

我不得不从 map 更改为 reduce，因为我的代码中充满了重复，因为我没有从数组中删除。如果我按照之前的 Whosebug 帖子做同样的事情，所有相同的内容都会被删除。

allFeedback 是一个对象数组，包含返回给用户的消息并键入 'error'、'success' 或 'info'

家长：

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>

所有的子组件都是相同的，但不同的是检查要将哪个组件添加到屏幕。

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

我希望在按下 'close' 按钮时将其删除，并将其从数组中删除。但是因为我做不到 - 我被困在点击 3-4 次后循环达到 30 次。这也是我在代码中添加 if 的原因。但是当我要添加一个计时器时，最好也让它从数组中删除它。

编辑：我已经设法从数组中删除并使用 _onDismiss

下的代码上网

Answer 1

已解决

为了删除我检查过的重复项，所以它没有通过两次。

  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 });
  }

从其他组件关闭 MessageBar Office-UI-fabric

Close MessageBar Office-UI-fabric from other component

javascript

reactjs

office-ui-fabric

office-fabric