React で選択した li を強調表示する手順の詳細な説明

今回は、react で li を選択してハイライトする手順について詳しく説明します。react で li を選択してハイライトするための 注意点とは何ですか。実際のケースを見てみましょう。

単純な機能ですが、記録しておくと良いでしょう。ページ上には多くの li があり、クリックした li が強調表示されます。当時 jq を使用したときは、選択した要素を addClass に追加し、その兄弟要素を削除して、アクティブなスタイルを記述するだけでした。さて、react を使って同様の操作を実装する場合、私が考えるのは currentIndex を使用し、currentIndex がどの要素にあるかを判断して切り替えることです。

まず、レンダリングは次のとおりです:

コード:

    class Category extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0
        }
        this.setCurrentIndex = this.setCurrentIndex.bind(this)
    }
    setCurrentIndex(event) {
        this.setState({
            currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
        })
    }
    render() {
        let categoryArr = ['产品调整', '接口流量', '负载均衡', '第三方软件调整',
                            '安全加固', '性能控制', '日志查询', '业务分析'];
        let itemList = [];
        for(let i = 0; i {categoryArr[i]});
        }
        return 

{itemList}

    } }css 部分

      .category {
            padding-left: 0;
            &:after {
                content: '';
                display: block;
                clear: both;
            }
            li {
                float: left;
                width: 23%;
                height: 40px;
                margin-right: 10px;
                margin-bottom: 10px;
                border: 1px solid $border-color;
                list-style: none;
                color: $font-color;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                &.active {
                    border-color: #079ACD;
                }
          }

とても簡単ですね?これらのLIを生成するときに要素にインデックスフラグを追加し、クリックされたときにevent.currentTarget.getAttribute('index')を使用してインデックスを取り出し、currentIndexの値を設定してからCSSを記述することです。スタイルが完成しました。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

React と TypeScript および Mobx を組み合わせる手順の詳細な説明

React-router v4 を使用する手順の詳細な説明

以上がReact で選択した li を強調表示する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。