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)}/>);    

インスタンスであるthisになりますindexへComponentStart

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

thisのあなたが期待するものではありませんが、チェックインスタンスに反応することにより、配列内の要素を見ていません。配列内のIDまたはインデックスを比較するなど、データのみを含む配列から項目を削除します。