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

【问题标题】：Close MessageBar Office-UI-fabric from other component从其他组件关闭 MessageBar Office-UI-fabric
【发布时间】：2023-03-27 06:10:01
【问题描述】：

有人问过类似的问题，但不一样。参考1：How we can close the error messagebar of office react fabric component? 参考2：Office ui fabric panel won't close

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

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

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

我不得不从 map 更改为 reduce，因为我没有从数组中删除，因为我的代码被重复包围。如果我和之前的 stackoverflow 帖子一样，所有相同的内容都会被删除。

allFeedback 是一个对象数组，其中包含返回给用户的消息并输入“错误”、“成功”或“信息”

家长：

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}

当我按下“关闭”按钮并将其从阵列中移除时，我应该将其移除。但是因为我做不到 - 在点击 3-4 次后，我被困在 30 次循环中。这也是我在代码中添加 if 的原因。但是当我要添加一个计时器时，最好也让它从数组中删除它。

编辑：我已经设法使用 _onDismiss 下的代码从数组和网络中删除

【问题讨论】：

标签： javascript reactjs office-ui-fabric office-fabric

【解决方案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 });
  }

【讨论】：