如何在React.js中过滤组件/元素数组

Z时代
2024-01-10
分类：问答

因此，单击该按钮后，我可以通过该事件获得该按钮。但是，当我做一个过滤器时，它不会删除所说的按钮。

所以我在构造函数（）中有我的数组：

constructor()
{   
    super();
    this.options = [ 1, 2, 3, 4, 5]; 
    this.temp_option = []; 
    this.delete_me = this.delete_me.bind(this);
    this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>];
    this.state = { buttons: this.buttons };
}

然后我有功能：

delete_me(e)
{   
    console.log(e.target);
    this.buttons = this.buttons.filter((item) => item != e.target);
    console.log(this.buttons);
}

但是，其中this.buttons仍然包含两个元素。

我想过另一种删除它的方法，那就是使用“键”，但是我似乎找不到任何有关获得键值的东西。

回答：

首先，您需要绑定this到回调函数的范围。如果要访问用于从合成事件呈现按钮的react对象实例，则可以使用private变量来实现_targetInst。

class Buttons extends React.Component{
  constructor(props) {
    super(props);
    this.delete_me = this.delete_me.bind(this);
        this.state = {
        buttons : [<button key="0" onClick={this.delete_me}>0</button>,<button key="1" onClick={this.delete_me}>1</button>]
    };
  }
  delete_me(e){
    const buttons = this.state.buttons.filter((button) => button != e._targetInst._currentElement);
    this.setState({ buttons });
  }
  render() {
    return <div>{this.state.buttons}</div>;
  }
};
ReactDOM.render(
  <Buttons />,
  document.getElementById('container')
);