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

목록에서 항목을 제거하는 방법에 대해 머리를 감싸고있는 것처럼 보일 수 없습니다. 아마 다른 나쁜 디자인 결정 톤도 여기에 있습니다, newbs.

Answer 1

구성 요소의 소품은 변경할 수 없으므로 직접 수정할 수 없습니다. 위의 예에서 FilterList 구성 요소가 항목을 제거하려는 경우 상위 구성 요소에서 콜백을 호출해야합니다.

간단화 example of this.

FilterApp은 onClick 이벤트에서 호출되는 FilterList에 제거 기능을 전달합니다. 그러면 상위 항목을 제거하고 상태를 업데이트 한 다음 FilterList이 새 콘텐츠로 다시 렌더링됩니다.

희망이 도움이됩니다.

Answer 2

다음과 같은 것이 작동해야합니다. 루트 구성 요소가 상태를 관리하게하십시오.

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