0

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

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

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

https://codepen.io/_adamjw3/pen/MWWmGEg

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'));
4

1 回答 1

2

似乎您唯一的问题是您的过滤功能是错误的。它应该使用selectedDomElement.

const filtered =  this.myRefs.filter(item => item !== selectedDomElement);
于 2019-10-24T23:16:56.583 回答