我是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">×</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，我可以吗？
答案 0 :(得分：1)
当然可以。
例如，您可以将对CompanyList的引用作为Company组件中的一个道具传递：
<Company parent={this} company={company} key={company.id} />
然后调用CompanyList中可用的任何方法来通知它更改，在调用CompanyList时可能会更新其状态并触发重新呈现。
答案 1 :(得分：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。