我必须处理一个组件中两个网格的行选择。 当我单击顶部表格组件中的一行时，发生了严重错误，并且选择了该组件中另一张表的一行:( 如何谨慎处理这些表格组件中的行选择。 当前代码，例如以下代码： // tslint：disable-next-line：ordered-imports
import {
Checkbox, DatePicker, RaisedButton, Table, TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
TextField,
} from "material-ui";
import DateTimeFormat = Intl.DateTimeFormat;
import persianUtils from "material-ui-persian-date-picker-utils";
import React, { Component } from "react";
import { inputStyles } from "../IPConfig";
import { BoardMemberModel } from "../models/BoarddMembersModel";
import { IIranianLegalModel } from "../models/IPIIranianLegalModel";
import { IndividualForeignModel } from "../models/IPIndividualForeignModel";
import { IndividualIranService } from "../services/IPIndividualIranService";
import { LegalIranService } from "../services/IPLegalIranService";
import { SearchService } from "../services/SearchService";
import { BaseDataSelect } from "./IPBaseDataSelect";
import cloneDeep = require("lodash/cloneDeep");
interface IBoardMembersProps {
onChange: (name: string, value: any) => void;
person: IIranianLegalModel;
}
interface IBoardMembersState {
iranianPersons?: BoardMemberModel[];
relatedPersons?: BoardMemberModel[];
foreignerPersons?: IndividualForeignModel[];
boardMember: BoardMemberModel;
localMember: boolean;
selected: any[];
selectedrelatedPersons?: any[];
findingPersonState: number;
checked: boolean;
}
export class BoardMembers extends Component<IBoardMembersProps, IBoardMembersState> {
public constructor(props: IBoardMembersProps) {
super(props);
this.state = {
boardMember: new BoardMemberModel(), localMember: true,
selected: [],
// tslint:disable-next-line:object-literal-sort-keys
findingPersonState: 0,
checked: false,
};
}
public render() {
const { boardMember } = this.state;
const personsIranianList = this.personsIranianList();
const relatedPersonList = this.relatedPersonList();
const previewMember = this.previewMember();
const additionFields = this.additionFields();
return (
<div className="board-members">
<TextField name="nationalIdentifier"
hintText="کد ملی"
style={inputStyles.simpleText}
floatingLabelStyle={inputStyles.floatingStyles.floatingLabelStyle}
value={boardMember ? boardMember.nationalIdentifier : null}
onChange={this.onGlobalChange}
/>
<DatePicker floatingLabelText="تاریخ تولد" DateTimeFormat={DateTimeFormat} okLabel="تایید"
cancelLabel="لغو" locale="fa-IR" firstDayOfWeek={6} utils={persianUtils}
style={inputStyles.inputStyle} value={boardMember ? boardMember.birthDate : null}
floatingLabelFocusStyle={inputStyles.floatingStyles.floatingLabelFocusStyle}
onChange={this.onDateChange}
disabled={this.state.findingPersonState === 1 || this.state.localMember}
name="birthDate"
/>
{additionFields}
{previewMember}
<div><RaisedButton
onClick={this.handleNewPerson}
label="افزودن"
primary={true}
style={inputStyles.card.btn2}></RaisedButton>
<RaisedButton
onClick={this.editMember}
label="ویرایش"
primary={true}
style={inputStyles.card.btn2}></RaisedButton>
<RaisedButton
onClick={this.deleteMember}
label="حذف"
primary={true}
style={inputStyles.card.btn2}></RaisedButton>
<RaisedButton
label="بروز رسانی"
primary={true}
onClick={this.fetchPersons}
style={inputStyles.card.btn2}></RaisedButton>
</div>
<h3>اعضاء هیات مدیره</h3> <hr></hr>
<div>{personsIranianList}</div>
<h3>اشخاص مرتبط</h3> <hr></hr>
<div>{relatedPersonList}</div>
</div>
);
}
public saerchPerson = () => {
const { boardMember, localMember } = this.state;
switch (localMember) {
case false:
this.InquiryPerson();
break;
default:
SearchService.getInstance().getSearchInfo("NATIONAL_IDENTIFIER", boardMember.nationalIdentifier)
.then((response) => {
// Add New Person and Update List of BoardMembers
boardMember.birthDate = response.birthDate;
boardMember.firstName = response.firstName;
boardMember.lastName = response.lastName;
boardMember.nationalIdentifier = response.nationalIdentifier;
this.setState({ boardMember, findingPersonState: 1 });
// Add New Person
this.previewMember();
}).catch(() => {
// if response is null then check person by inquiry
// Call Inquiry
// this.InquiryPerson(boardMember.nationalIdentifier);
this.setState({ localMember: false });
});
break;
}
}
public InquiryPerson = () => {
// Todo
// CallService
const { boardMember } = this.state;
// tslint:disable-next-line:max-line-length
IndividualIranService.getInstance().getIndividualIranbyIdentifier(boardMember.nationalIdentifier).then((response) => {
if (response) {
// update State and Add new person by Response
boardMember.birthDate = response.birthDate;
boardMember.firstName = response.firstName;
boardMember.lastName = response.lastName;
boardMember.nationalIdentifier = response.nationalIdentifier;
// Add New Person
this.setState({ boardMember, localMember: true, findingPersonState: 1 });
this.previewMember();
}
});
}
public personsIranianList = () => {
const { iranianPersons } = this.state;
if (!iranianPersons) {
return null;
}
const persons = iranianPersons;
const items = persons.map((person, index) => {
if (person.relationType.code === "BOARD_DIRECTORS_MEMBER" || person.relationType.code === "CEO") {
return <TableRow selected={this.isSelected(index)}>
<TableRowColumn>{person.nationalIdentifier}</TableRowColumn>
<TableRowColumn>{person.firstName}</TableRowColumn>
<TableRowColumn>{person.lastName}</TableRowColumn>
<TableRowColumn>{person.relationType.title}</TableRowColumn>
</TableRow>;
}
});
return <div> <Table onRowSelection={this.handleRowSelectionBoardMembers}>
<TableHeader>
<TableRow>
<TableHeaderColumn>کد ملی</TableHeaderColumn>
<TableHeaderColumn>نام</TableHeaderColumn>
<TableHeaderColumn>نام خانوادگی</TableHeaderColumn>
<TableHeaderColumn>سمت</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
{items}
</TableBody>
</Table></div >
;
}
private relatedPersonList = () => {
const { relatedPersons } = this.state;
if (!relatedPersons) {
return null;
}
const persons = relatedPersons;
const items = persons.map((person, index) => {
if (person.relationType.code !== "CEO" && person.relationType.code !== "BOARD_DIRECTORS_MEMBER") {
return <TableRow selected={this.isSelected(index)}>
<TableRowColumn>{person.nationalIdentifier}</TableRowColumn>
<TableRowColumn>{person.firstName}</TableRowColumn>
<TableRowColumn>{person.lastName}</TableRowColumn>
<TableRowColumn>{person.relationType.title}</TableRowColumn>
</TableRow>;
}
});
return <div> <Table onRowSelection={this.handleRowSelectionRelatedPersons}>
<TableHeader>
<TableRow>
<TableHeaderColumn>کد ملی</TableHeaderColumn>
<TableHeaderColumn>نام</TableHeaderColumn>
<TableHeaderColumn>نام خانوادگی</TableHeaderColumn>
<TableHeaderColumn>سمت</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
{items}
</TableBody>
</Table></div>;
}
private additionFields = () => {
const { boardMember, findingPersonState } = this.state;
if (findingPersonState === 1) {
return <div>
<div><BaseDataSelect lookupKey="INVOLVED_PARTY_INVOLVED_PARTY_RELATION_TYPE" name="relationType"
label="سمت" value={boardMember ? boardMember.relationType : null} onChange={this.onChange} /></div>
<div> <Checkbox
label="امضاء دار"
checked={this.state.boardMember.signer}
onCheck={this.onChecked}
/></div>
</div>;
}
return null;
}
private editMember = () => {
const { boardMember } = this.state;
IndividualIranService.getInstance().updateBoardMember("96325874102", boardMember).then(() => {
this.fetchPersons();
}).catch(() => {
this.fetchPersons();
});
}
private deleteMember = () => {
const { boardMember } = this.state;
if (!boardMember) {
return;
}
IndividualIranService.getInstance().deleteBoardMember("96325874102", boardMember).then(() => {
this.fetchPersons();
});
}
private handleNewPerson = () => {
// Todo
// Temporary Cancel Following Operation to Provide Required Rest Services
const { boardMember } = this.state;
IndividualIranService.getInstance().insertBoardMember("96325874102", boardMember).then(() => {
this.fetchPersons();
}).catch(() => {
this.fetchPersons();
});
}
private onGlobalChange = (event: object, newValue: string) => {
const { boardMember } = this.state;
boardMember[(event as any).target.name] = newValue;
this.setState({ boardMember });
if (boardMember.nationalIdentifier.length === 10) {
this.saerchPerson();
}
}
private fetchPersons = () => {
LegalIranService.getInstance().getBoardMembers("96325874102").then((response) => {
this.setState({ iranianPersons: response });
});
LegalIranService.getInstance().getBoardMembers("96325874102").then((response) => {
this.setState({ relatedPersons: response });
});
}
private isSelected = (index) => {
return this.state.selected.indexOf(index) !== -1;
}
private handleRowSelectionBoardMembers = (selectedRows) => {
const { iranianPersons, boardMember, selected } = this.state;
this.setState({
selected: selectedRows,
});
if (selected.length > 0) {
const currentBoardMember = iranianPersons[selected[0]];
boardMember.relationType.code = currentBoardMember.relationType.title;
this.setState({
boardMember: currentBoardMember,
});
}
}
private handleRowSelectionRelatedPersons = (selectedRows) => {
const { relatedPersons, boardMember, selectedrelatedPersons } = this.state;
this.setState({
selectedrelatedPersons: selectedRows,
});
if (selectedrelatedPersons.length > 0) {
const currentBoardMember = relatedPersons[selectedrelatedPersons[0]];
boardMember.relationType.code = currentBoardMember.relationType.title;
this.setState({
boardMember: currentBoardMember,
});
}
}
private previewMember = () => {
const { boardMember, findingPersonState } = this.state;
if (!boardMember) {
return null;
}
if (findingPersonState === 1) {
const rawHtml = <div className="alert-info">
<span>نام:</span><span>{boardMember.firstName}</span>
<span>نام خانوادگی:</span><span>{boardMember.lastName}</span>
<span>تاریخ تولد:</span><span>{boardMember.birthDate}</span>
</div>;
return rawHtml;
}
return null;
}
private onChecked = (event: object, isInputChecked: boolean) => {
const { boardMember } = this.state;
boardMember.signer = isInputChecked;
this.setState({ boardMember });
}
private onDateChange = (event: object, newValue: string) => {
const { boardMember, findingPersonState } = this.state;
boardMember.birthDate = newValue;
this.setState({ boardMember });
if (!boardMember.id) {
this.saerchPerson();
}
}
private onChange = (name: string, value) => {
const { boardMember } = this.state;
if (!boardMember) {
return;
}
boardMember.relationType = value;
this.setState({ boardMember });
}
}