如何从另一个组件列表中删除一个项目

Question

我是reactjs的新用户。我试图通过创建一个简单的页面来添加，修改和删除一些条目，以更接近它。 我现在的问题是：我怎样才能从列表中删除一个条目。我有以下组成部分：

这是一个用于显示列表（组件CompanyList）：

import React, { Component } from 'react'; 
import Company from './Company'; 

class CompanyList extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      search: '', 
      companies: props.companies 
     }; 
    } 

    updateSearch(event) { 
     this.setState({ search: event.target.value.substr(0,20) }) 
    } 

    addCompany(event) { 
     event.preventDefault(); 
     let nummer = this.refs.nummer.value; 
     let bezeichnung = this.refs.bezeichnung.value; 
     let id = Math.floor((Math.random()*100) + 1); 
     $.ajax({ 
      type: "POST", 
      context:this, 
      dataType: "json", 
      async: true, 
      url: "../data/post/json/companies", 
      data: ({ 
       _token : window.Laravel.csrfToken, 
       nummer: nummer, 
       bezeichnung : bezeichnung, 
      }), 
      success: function (data) { 
      id = data.Nummer; 
      this.setState({ 
       companies: this.state.companies.concat({id, nummer, bezeichnung}) 
      }) 
      this.refs.bezeichnung.value = ''; 
      this.refs.nummer.value = ''; 
      } 
     }); 
    } 

    render() { 
     let filteredCompanies = this.state.companies.filter(
     (company) => { 
      return company.bezeichnung.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1; 
     } 
    ); 
     return (
     <div> 
      <div className="row"> 
      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">Search</div> 
      <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
       <div className="form-group"> 
       <input className="form-control" type="text" value={this.state.search} placeholder="Search" onChange={this.updateSearch.bind(this)} /> 
       </div> 
      </div> 
      </div> 
      <form onSubmit={this.addCompany.bind(this)}> 
      <div className="row"> 
       <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">Create new entry</div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <input className="form-control" type="number" ref="nummer" placeholder="New company no." required /> 
       </div> 
       </div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <input className="form-control" type="text" ref="bezeichnung" placeholder="New company name" required /> 
       </div> 
       </div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <button type="submit" className="btn btn-default">Add new company</button> 
       </div> 
       </div> 
      </div> 
      </form> 
      <div className="row"> 
      <div className="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
       <ul> 
       { 
       filteredCompanies.map((company)=> { 
        return (
        <div> 
         <Company company={company} key={company.id} /> 
        </div> 
       ); 
       }) 
       } 
       </ul> 
      </div> 
      </div> 
     </div> 
     ); 
    } 
} 

export default CompanyList 

正如你所看到的，我还有一个Company组件，其中每家公司显示。这是组件Company：

import React, { Component } from 'react'; 
import CompanyOptions from './CompanyOptions'; 


class Company extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      company: props.company, 
      onClick: props.onClick, 
      editFieldsCss: "displayNone", 
      optionFieldsCss: "modal fade", 
      deletionFieldsCss: "displayNone", 
      currentCompany: props.company, 
     }; 
    } 

    editCompany(event) { 
     event.preventDefault(); 
     let nummer = this.refs.companyNummer.value; 
     let bezeichnung = this.refs.companyBezeichnung.value; 
     let id = this.state.company.id; 
     $.ajax({ 
      type: "POST", 
      context:this, 
      dataType: "json", 
      async: true, 
      url: "../data/post/json/companies/edit", 
      data: ({ 
       _token : window.Laravel.csrfToken, 
       nummer: nummer, 
       bezeichnung : bezeichnung, 
      }), 
      success: function (data) { 
       this.props.company.id = id; 
       this.props.company.nummer = nummer; 
       this.props.company.bezeichnung = bezeichnung; 
       this.toggleEditFields(); 
       this.toggleOptionFields(); 
       $('#' + this.props.company.id).modal('hide'); 
      } 
     }); 
    } 

    deleteCompany(event) { 
     event.preventDefault(); 
     let nummer = this.refs.companyNummer.value; 
     let bezeichnung = this.refs.companyBezeichnung.value; 
     let id = this.state.company.id; 
     $.ajax({ 
      type: "POST", 
      context:this, 
      dataType: "json", 
      async: true, 
      url: "../data/post/json/companies/delete", 
      data: ({ 
       _token : window.Laravel.csrfToken, 
       id : id, 
       nummer: nummer, 
       bezeichnung : bezeichnung, 
      }), 
      success: function (data) { 
       if(data == true) { 
        this.toggleEditFields(); 
        this.toggleOptionFields(); 
        $('#' + this.props.company.id).modal('hide'); 
        this.setState({company:""}); 
       } 
      } 
     }); 
    } 

    toggleEditFields() { 
     var css = (this.state.editFieldsCss === "displayNone") ? "displayBlock" : "displayNone"; 
     this.setState({"editFieldsCss":css}); 
    } 

    toggleDeletionFields() { 
     var css = (this.state.deletionFieldsCss === "displayNone") ? "displayBlock" : "displayNone"; 
     this.setState({"deletionFieldsCss":css}); 
    } 

    toggleOptionFields() { 
     /* 
     var css = (this.state.optionFieldsCss === "modal fade in displayBlock") ? "modal fade" : "modal fade in displayBlock"; 
     this.setState({ 
      "optionFieldsCss":css, 
      currentCompany: this.company 
     }); 
     */ 
     $('#' + this.state.company.id).modal(); 
    } 

    render() { 
     return (
      <div> 
       <li> 
        <div className="cursorPointer" onClick={this.toggleOptionFields.bind(this)}> 
         {this.props.company.nummer} {this.props.company.bezeichnung} 
        </div> 

        <div className={this.state.optionFieldsCss} id={this.state.company.id} tabIndex="-1" role="dialog"> 
         <div className="modal-dialog" role="document"> 
          <div className="modal-content"> 
           <div className="modal-header"> 
            <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
            <h4 className="modal-title">Company entry "{this.props.company.bezeichnung}"</h4> 
           </div> 
           <div className="modal-body"> 
            <div key={this.state.company.id}> 
             <div> 
              <form onSubmit={this.editCompany.bind(this)}> 
               <div className="row"> 
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
                 <strong>Modify company entry:</strong> 
                </div> 
               </div> 
               <div className="row"> 
                <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
                 Company no. 
                </div> 
                <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
                 <div className="form-group"> 
                  <input className="form-control" type="number" min="1" step="1" ref="companyNummer" placeholder="Company no." defaultValue={this.state.company.nummer} required /> 
                 </div> 
                </div> 
               </div> 
               <div className="row"> 
                <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
                 Company name 
                </div> 
                <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
                 <div className="form-group"> 
                  <input className="form-control" type="text" ref="companyBezeichnung" placeholder="Company name" defaultValue={this.state.company.bezeichnung} required /> 
                 </div> 
                </div> 
               </div> 
               <div className="row"> 
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
                 <div className="form-group"> 
                  <button type="submit" className="btn btn-success"><span className="glyphicon glyphicon-edit"></span> Save edits</button> 
                 </div> 
                </div> 
               </div> 
              </form> 
              <form onSubmit={this.deleteCompany.bind(this)}> 
               <div className="row"> 
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
                 <div className="form-group"> 
                  <button type="button" onClick={this.toggleDeletionFields.bind(this)} className="btn btn-danger"><span className="glyphicon glyphicon-remove"></span> Delete company entry</button> 
                 </div> 
                </div> 
               </div> 
               <div className="row" className={this.state.deletionFieldsCss}> 
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
                 Please confirm deletion! 
                </div> 
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 "> 
                 <div className="form-group"> 
                  <button type="submit" className="btn btn-default">Yes</button> 
                  <button type="button" className="btn btn-default marginLeft15px" onClick={this.toggleDeletionFields.bind(this)}>No</button> 
                 </div> 
                </div> 
               </div> 
              </form> 
             </div> 
            </div> 
           </div> 
           <div className="modal-footer"> 
            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </li> 
      </div> 
     ); 
    } 
} 

export default Company 

如何得到CompanyList现在的信息，当我在Company删除项目？在Company我不能访问CompanyList，可以吗？

Answer 1

我不会将整个父对象传递给子对象，因为这样会破坏封装。相反，我只会传递一个函数，当Company中的项目被删除时会被调用。该功能将为CompanyList。

因此在CompanyList中，您可以使用例如

onCompanyItemDelete = function(arg){ 
    ... 
} 

提炼公司时，你会是这样的：

<Company onItemDelete={this.onCompanyItemDelete.bind(this)} company={company} key={company.id} /> 

和Company需要作为this.props.onItemDelete当你调用函数。

要了解更多，你可以检查一些其他SO posts about passing function to child components或here。

Answer 2

当然可以。

例如，您可以传递给CompanyList的引用作为道具之一Company组件：

<Company parent={this} company={company} key={company.id} /> 

然后调用在CompanyList可通知其变化的任何方法，根据呼叫CompanyList可能会更新其状态并触发重投。