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

标签 javascript reactjs

我是 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

当我删除Company中的项目时,如何获取CompanyList现在的信息?在 Company 中,我无法访问 CompanyList,可以吗?

最佳答案

我不会将整个父对象传递给子对象,因为这会破坏封装。相反,我只会向它传递一个函数,当在 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 componentshere .

关于javascript - 如何从另一个组件的列表中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44521235/

相关文章:

javascript - 我可以使用 lambda 调用将路径参数传递给另一个 lambda 函数吗?

javascript - 调整我的表或窗口的大小? HTML5

Javascript AJAX 函数返回类型未定义

javascript - React.js - 有条件地使用 dangerouslySetInnerHTML

javascript - 使用 React.js 检查属性是否存在

javascript - 在 JavaScript 中将大数转换为更大的因数

javascript - 在不弹出的情况下创建 React App 中的工作箱

javascript - 组件之间状态变化的问题

reactjs - 如何使用 React.js 在 Botframework v4 聊天应用程序中执行发送“键入指示器”?

javascript - Reactjs:将侧边栏组件导入到不同的页面