ReactJS'deki bir tıklama etkinliğiyle bir listeden bir öğeyi nasıl kaldırabilirsiniz?

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

Kafamı bir öğenin listeden nasıl çıkarılacağı konusunda sarmış görünmüyorum. Muhtemelen burada bir sürü başka kötü tasarım kararı da var, yeniler.

Answer 1

Bileşenlerdeki aksesuarlar değişmez, yani bunları doğrudan değiştiremezsiniz. Yukarıdaki örnekte, FilterList bileşeninin bir öğeyi kaldırmak istemesi durumunda, ana bileşenden bir geri arama çağırması gerekir.

Basitleştirilmiş bir example of this.

FilterApp, onClick olayında çağrılan bir kaldırma işlevini FilterList'a geçirir. Bu, bir öğeyi ana öğeden kaldırır, durumu günceller ve ardından yeni içerikle yeniden oluşturulmasına neden olur.

Bu yardımcı olur umarım.

Answer 2

Aşağıdaki gibi bir şey çalışmalıdır. Kök bileşeninizin durumu yönetmesine izin verin.

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