Question

所以当点击它时，我可以通过该按钮获取该按钮。但是当我做一个过滤器时，它不会删除所述按钮。

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

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仍有两个元素。

我想到了删除它的另一种方法，那就是使用＆＃39;键，但我似乎无法找到关于获取键值的任何内容。

Answer 1

您目前采取的方法并非真正“反应”。你需要更多地思考状态的变化而不是直接改变dom。

一种方法是：

class App extends React.Component {
  constructor(){
    super();
    this.state ={
      visibleButtons: [ 11, 22, 33, 44 ],
      buttons: {
        11: {
          label: "Foo",
        },
        22: {
          label: "Bar"
        },
        33: {
          label: "Cow",
        },
        44: {
          label: "Pig"
        },        
      },
    }
  }

  onDelete(deletedId) {
    this.setState({
       visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId)
    });
  }

  render () {                                        
    return (
      <div>
        { this.state.visibleButtons.map(buttonId => (
          <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button>
        )) }   
      </div>
    );
  }
}

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

http://codepen.io/cjke/pen/RKwWwZ?editors=0010

修改

显示添加和删除的示例。唯一的id是非常原始的，并没有主动检查那里有什么，但你应该得到要点：

class App extends React.Component { constructor(){ super(); this.onAdd = this.onAdd.bind(this); this.onChange = this.onChange.bind(this); this.state ={ value: '', uniqueId: 100, visibleButtons: [ 11, 22, 33, 44 ], buttons: { 11: { label: "Foo", }, 22: { label: "Bar" }, 33: { label: "Cow", }, 44: { label: "Pig" }, }, } } onDelete(deletedId) { this.setState({ visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId) }); } onChange(e) { this.setState({ value: e.target.value }); } onAdd(e) { this.setState({ uniqueId: this.state.uniqueId + 1, value: '', buttons: { ...this.state.buttons, [this.state.uniqueId]: { label: this.state.value, } }, visibleButtons: [...this.state.visibleButtons, this.state.uniqueId], }); } render () { return ( <div> <div> { this.state.visibleButtons.map(buttonId => ( <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button> )) } </div> <br/> <div> <input onChange={this.onChange} value={this.state.value}/><button onClick={this.onAdd}>+</button> </div> </div> ); } } ReactDOM.render(<App/>,document.getElementById('root'));

Answer 2

首先，您需要将this绑定到回调函数的范围。如果要访问用于从synthetic event呈现按钮的反应对象实例，可以使用私有变量_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')
);

但是，正如Chris提到的那样，你的方法与React模式不太一致，你应该避免访问私有方法或属性（通常以下划线命名）

如何过滤reactjs中的组件/元素数组

2 个答案: