Question

我在基于单击按钮的React中过滤div时遇到问题。我尝试在代码中实现https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements，但未成功。有谁知道如何修改它？或其他解决方案，而不是通过切换类。

import React, { Component } from 'react';
import './Work.css';

class Work extends Component {
    filterSelection = (c) => {
        var x, i;
        x = document.getElementsByClassName("element");
        if (c == "all") c = "";
        for (i = 0; i < x.length; i++) {
            this.w3RemoveClass(x[i], "show");
            if (x[i].className.indexOf(c) > -1) this.w3AddClass(x[i], "show");
        }
    }

    w3AddClass = (element, name) => {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
        }
    }

    w3RemoveClass = (element, name) => {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            while (arr1.indexOf(arr2[i]) > -1) {
                arr1.splice(arr1.indexOf(arr2[i]), 1);     
            }
        }
        element.className = arr1.join(" ");
    }

    render() {
        return (
            <React.Fragment>
                <div className="container-fluid WorkWrapper">
                    <div className="container">
                    <h1>Work</h1>
                    </div>
                </div>
                <div className="container">
                    <div className="Works">
                        <div className="FilteredView">
                            <button onClick={this.filterSelection("all")}>ALL</button>
                            <span className="slash">&#47;</span>
                            <button onClick={this.filterSelection("print")}>PRINT</button>
                            <span className="slash">&#47;</span>
                            <button onClick={this.filterSelection("photography")}>PHOTOGRAPHY</button>
                            <span className="slash">&#47;</span>
                            <button onClick={this.filterSelection("web")}>WEB</button>
                            <span className="slash">&#47;</span>
                            <button onClick={this.filterSelection("applications")}>APPLICATIONS</button>
                        </div>
                    </div>
                </div>
                <div className="container">
                    <ul className={"Preview" + (this.state.list ? ' List' : '')}>
                        <a href="https://www.google.com/">
                            <li>
                                <img className="element web" src={WorkGiraffe} alt="Giraffes"/>
                            </li>
                        </a>
                        <a href="https://www.google.com/">
                            <li>
                                <img className="element applications" src={WorkButtons} alt="Buttons"/>
                            </li>
                        </a>
                        <a href="https://www.google.com/">
                            <li>
                                <img className="element photography" src={WorkSliding} alt="Sliding"/>
                            </li>
                        </a>
                        <a href="https://www.google.com/">
                            <li>
                                <img className="element web" src={WorkSmiling} alt="Smiling"/>
                            </li>
                        </a>
                        <a href="https://www.google.com/">
                            <li>
                                <img className="element print" src={WorkSocialMedia} alt="Social Media"/>
                            </li>
                        </a>
                    </ul>
                </div>
            </React.Fragment>
        )
    }
}

export default Work;

我的css文件包含：

.Preview a li img {
    width: 100%;
    height: auto;
}

.show {
    display: block!important;
}

.element {
    display: none;
}

Answer 1

如果您希望在React中实现该教程，我建议避免过多地关注该教程，因为使用状态的“反应”方法有些不同。

我提供了一种非常简单的方法（绝不是完美的方法），但是您会明白的。

https://codesandbox.io/s/9090v4w5o

Answer 2

您的问题是您正在渲染事件监听器，而不是单击它。

这里是您所拥有的：

filterSelection = (c) => {
   ...
}

由于您正在调用onClick=this.filterSelection('text')，因此您已经在调用回调。您需要做的是将filterSelection更改为以下内容：

filterSelection = (c) => () => {
   ...
}

那样，它只有在您实际单击某项后才能运行。

这有意义吗？尝试一下。我在这里做过：https://codesandbox.io/s/lxzpk4p68z

反应过滤div

2 个答案: