如何过滤 refs 数组

Question

我有一组数据映射并显示在屏幕上。我希望能够在单击时对这些 dom 元素执行操作。我已经将 refs 存储在一个数组中，现在 onclick 我想对被点击的那个做一些事情，对其余的做一些其他事情。

所以我想到了使用 es6 过滤器从新数组中删除当前的，然后迭代它们。然后我可以自由地对被点击的项目做任何我想做的事。

但是我无法让过滤器工作。不安慰任何东西。

class App extends React.Component {
    constructor(props) {
        super();
    this.myRefs = [];
    this.state = {
        testData: [
            "dave",
            "pete",
            "mark"
        ]
     }
  }

  myActionHandler = key => {
     const selectedDomElement = this.myRefs[key];
     const filtered =  this.myRefs.filter(item => item !== item);


     filtered.forEach(function(entry) {
        console.log("all but selected ne", entry);
    });
  };

    render(){
        return (
            <div className="container">
                {this.state.testData.map((item, key) => {
                    return (
                        <div key={key} >
                            <button onClick={() => this.myActionHandler(key)} ref={ref => (this.myRefs[key] = ref)} >
                                {item} 
                            </button>
                        </div>
                    );
                })}
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

看来您唯一的问题是您的过滤功能有误。它应该使用 selectedDomElement.

const filtered =  this.myRefs.filter(item => item !== selectedDomElement);

如何过滤 refs 数组

How to filter an array of refs

javascript

reactjs

react-ref