Использование фильтра на «это» в Reactjs

Question

Так что это мой родительский класс

class ComponentStart extends Component { 
    constructor() 
    { 
     super(); 
     this.count = 0; 
     this.state = {}; 
     this.repeats = []; 
    } 

    delete_this(index) 
    { 
     console.log("I am deleting"); 
     console.log(index); 
     this.repeats = this.repeats.filter((item) => item != index); 
     this.setState({ repeats: this.repeats }); 
    } 
    componentWillMount() 
    { 
     for (let i = 0; i < this.props.number; i++) 
     { 
      this.repeats.push(<StartMultiple key={this.count} id={this.count} delete_this={this.delete_this.bind(this)}/>);    
      this.count++; 
     }  
     this.setState({ repeats: this.repeats}); 
    } 

    componentHasMounted() 
    { 
    } 

    render() 
    { 
     return(
      <div> 
       {this.state.repeats} 

       <button onClick={this.add_repeat.bind(this, event)}>clickable</button> 
      </div> 
     ); 
    } 

И это дочерний класс:

export default class StartMultiple extends Component { 
    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 }; 
    } 

    ComponentDidMount() 
    { 
     $.ajax({ 
      url: "src/php/search.php?type=search", 
      dataType: "json", 
      success: (data) => 
      { 
       console.log(data); 
      } 
     }); 
    } 

    delete_this(value) 
    { 
     console.log(value); 
     this.props.delete_this(value); 
     return; 
    } 

    render() 
    { 
     console.log(this.props); 
     return(
      <div> 
       <input id={"input" + this.props.id} type="text"/> 
       <select> 
        {this.options.map(this.toOptions)} 
       </select> 
       <div> 
        I am some text 
       </div> 
       <div> 
        <button onClick={this.hide_info.bind(this)}>hide previous</button> 
        <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> 
       </div> 

       {this.buttons} 
      </div> 
     ); 
    } 
} 

Так что же происходит, что, когда я нажимаю кнопку в StartMultiple <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> он вызывает функцию родителя delete_this (что он делает).

Так что в принципе все работает нормально, как я ожидаю, кроме фильтрующей части. Я не знаю, почему это не фильтруются, даже если он правильно передает компонент

Answer 1

Вы сравнения Реагировать элементы, которые вы создаете:

this.repeats.push(<StartMultiple ... delete_this={this.delete_this.bind(this)}/>);    

к index, который будет this, который является экземпляром из ComponentStart

this.repeats = this.repeats.filter((item) => item != index); 

this не то, что вы ожидаете, но не искать элементы в массиве с помощью React проверки экземпляра. Удалите элементы из массива только с данными, такими как сравнение идентификатора или индекса в массиве.