come rimuovere un elemento da un elenco con un evento click in ReactJS?

Question

var FilterList = React.createClass({ 
    remove: function(item){ 

    this.props.items = this.props.items.filter(function(itm){ 
     return item.id !== itm.id; 
    }); 

    return false; 
    }, 
    render: function() { 
    var createItem = function(item) { 
     return (
     <li> 
      <span>{item}</span> 
      <a href data-id="{item.id}" class="remove-filter" onClick={this.remove.bind(item)}>remove</a> 
     </li> 

    ); 
    }; 
    return <ul>{this.props.items.map(createItem.bind(this))}</ul>; 
    } 
}); 
var FilterApp = React.createClass({ 
    getInitialState: function() { 
    return {items: [], item: { 
     id: 0, 
     type: null 
    }}; 
    }, 
    onChangeType: function(e){ 
    this.setState({ 
     item: { 
     id: this.state.items[this.state.items.length], 
     type: e.target.value 
     } 
    }); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var nextItems = this.state.items.concat([this.state.item]); 
    var item = {}; 
    this.setState({items: nextItems, item: {}}); 
    }, 
    render: function() { 
    return (
     <div> 
     <h3>Filters</h3> 
     <FilterList items={this.state.items} /> 

     <form className="filter" onSubmit={this.handleSubmit}> 
      <fieldset> 
      <legend>Filter</legend> 
      <div className="form-grp"> 
       <select name="type" onChange={this.onChangeType}> 
       <option>foo</option> 
       <option>bar</option> 
       <option>baz</option> 
       </select> 
      </div> 
      </fieldset> 
      <div className="actions"> 
      <button>{'Add #' + (this.state.items.length + 1)}</button> 
      </div> 
     </form> 
     </div> 
    ); 
    } 
}); 

React.render(<FilterApp />, document.body); 

Non riesco a spiegarmi come rimuovere un elemento dall'elenco. Probabilmente facendo anche un sacco di altre cattive decisioni di design, newb.

Answer 1

Gli oggetti sui componenti sono immutabili, il che significa che non è possibile modificarli direttamente. Nell'esempio sopra riportato se il componente FilterList desidera rimuovere un elemento, è necessario richiamare un callback dal componente principale.

A example of this semplificato.

FilterApp passa una funzione di rimozione a FilterList chiamata nell'evento onClick. Ciò rimuoverà un elemento dal genitore, aggiornerà lo stato, quindi causerà FilterList per il re-rendering con il nuovo contenuto.

Spero che questo aiuti.

Answer 2

Qualcosa come il sotto dovrebbe funzionare. Lascia che il tuo componente root gestisca lo stato.

var FilterList = React.createClass({ 
    render: function() { 
    var createItem = function(item) { 
     return (
     <li> 
      <span>{item}</span> 
      <a href data-id="{item.id}" class="remove-filter" onClick={this.props.remove.bind(item)}>remove</a> 
     </li> 

    ); 
    }; 
    return <ul>{this.props.items.map(createItem.bind(this))}</ul>; 
    } 
}); 

var FilterApp = React.createClass({ 
    getInitialState: function() { 
    return {items: [], item: { 
     id: 0, 
     type: null 
    }}; 
    }, 
    onChangeType: function(e){ 
    this.setState({ 
     item: { 
     id: this.state.items[this.state.items.length], 
     type: e.target.value 
     } 
    }); 
    }, 
    remove: function(item, ev){ 
    ev.preventDefault(); 

    var items = this.state.items.filter(function(itm){ 
     return item.id !== itm.id; 
    }); 

    this.setState({ items: items }); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var nextItems = this.state.items.concat([this.state.item]); 
    var item = {}; 
    this.setState({items: nextItems, item: {}}); 
    }, 
    render: function() { 
    return (
     <div> 
     <h3>Filters</h3> 
     <FilterList remove={this.remove} items={this.state.items} /> 

     <form className="filter" onSubmit={this.handleSubmit}> 
      <fieldset> 
      <legend>Filter</legend> 
      <div className="form-grp"> 
       <select name="type" onChange={this.onChangeType}> 
       <option>foo</option> 
       <option>bar</option> 
       <option>baz</option> 
       </select> 
      </div> 
      </fieldset> 
      <div className="actions"> 
      <button>{'Add #' + (this.state.items.length + 1)}</button> 
      </div> 
     </form> 
     </div> 
    ); 
    } 
}); 

React.render(<FilterApp />, document.body);