0

同様の質問がされていますが、同じではありません。Ref1: Office React Fabric コンポーネントのエラー メッセージバーを閉じるにはどうすればよいですか? Ref2: Office UI ファブリック パネルが閉じない

私の質問は次のとおりです。親コンポーネントの削減とプッシュを介して 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 の下のコードを使用して、配列と Web から削除することができました

4

1 に答える 1

0

解決した

重複を削除するためにチェックしたので、2回渡されませんでした。

  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 });
  }
于 2019-07-11T11:40:48.970 に答える