Question

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

我的问题如下。我通过减少并推送父组件来添加MessageBars。我将_onDismiss移到了父级，并且当我单击“关闭”按钮时，我正在为正确的MessageBar编制索引。但是我如何设法既将其从阵列中移除又将其关闭？

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

奖金问题：如何为信息和成功添加计时器，但不向错误添加计时器？

我不得不从map更改为减少，因为我的代码被重复重复所包围，因为我没有从数组中删除。如果我像以前的stackoverflow一样进行操作，则会删除所有相同的内容。

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}

我希望在按下“关闭”按钮时将其删除，并将其从阵列中删除。但是因为我做不到，所以我陷入了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

1 个答案: