[英]ReactJS (Typescript + Fabric UI) - State or Data Handler?
我是ReactJs的新手,需要帮助。 我有4个组合框,它们必须一起交互。 因此,在第一层,我有业务组,第二个业务部门,第三个是供应商,第四个是产品经理。
如果我在业务组中选择一个条目,则组合框(单位,供应商,经理)中的选项应刷新。 但是,如果我选择一个供应商(第三级),则业务组,部门和产品经理组合框应仅具有所选供应商的选项。
我将在挂载app.tsx时使用一个数组。 我将该数组拆分为业务组,并填充了所有组合框。 这是分裂的正确方法吗? 以及组合框如何一起交互。 我认为我需要数据处理程序或状态处理程序?!
我有我的主要app.tsx,combox的Filter.tsx,可用条目的grid.tsx和界面的common_models.ts。
app.tsx:
import * as React from 'react';
import { IGridData, Icbo } from '../model/common_models';
import Filter from '../src/Filter';
import Grid from '../src/Grid';
import '../src/App.css';
interface IMyCompomentState {
ALL_DATA: IGridData[];
BG_DATA: Icbo[];
}
let datadefs: any;
interface IMyCompomentProps {
data?: any;
}
class App extends React.Component<IMyCompomentProps, IMyCompomentState> {
constructor(props: IMyCompomentProps) {
super(props);
this.state = {
ALL_DATA: [],
BG_DATA: []
};
}
public componentWillMount() {
this.getALL_DATA();
setTimeout(() => {
datadefs = this.setBGData(this.state.ALL_DATA)
this.setState({ BG_DATA: datadefs })
}
, 2000);
}
public getALL_DATA() {
this.setState({
ALL_DATA: [
{
BG_ID: 7,
BG: 'Business Group 1',
BU_ID: 15,
BU: 'Business Unit 11',
Vendor: 'Vendor xx',
PM: 'Unasigned',
PM_ID: 5
},
{
BG_ID: 9,
BG: 'Business Group 2',
BU_ID: 17,
BU: 'Business Unit 22',
Vendor: 'Vendor xx',
PM: 'Unasigned',
PM_ID: 5
},
{
BG_ID: 10,
BG: 'Business Group 3',
BU_ID: 16,
BU: 'Business Unit 33',
Vendor: 'Vendor zz',
PM: 'Mario',
PM_ID: 22
},
{
BG_ID: 10,
BG: 'Business Group 3',
BU_ID: 16,
BU: 'Business Unit 33',
Vendor: 'Vendor zz',
PM: 'Luigi',
PM_ID: 14
},
{
BG_ID: 9,
BG: 'Business Group 2',
BU_ID: 4,
BU: 'Business Unit 44',
Vendor: 'Vendor zz',
PM: 'Mario',
PM_ID: 22
},
{
BG_ID: 9,
BG: 'Business Group 2',
BU_ID: 4,
BU: 'Business Unit 44',
Vendor: 'Vendor zz',
PM: 'Luigi',
PM_ID: 14
},
{
BG_ID: 7,
BG: 'Business Group 1',
BU_ID: 1,
BU: 'Business Unit 55',
Vendor: 'Vendor aaa',
PM: 'Link',
PM_ID: 55
},
{
BG_ID: 7,
BG: 'Business Group 1',
BU_ID: 5,
BU: 'Business Unit 66',
Vendor: 'Vendor aaa',
PM: 'Zelda',
PM_ID: 10
},
{
BG_ID: 8,
BG: 'Business Group 4',
BU_ID: 12,
BU: 'Business Unit 77',
Vendor: 'Vendor aaa',
PM: 'Zelda',
PM_ID: 10
},
{
BG_ID: 9,
BG: 'Business Group 2',
BU_ID: 13,
BU: 'Business Unit 88',
Vendor: 'Vendor aaa',
PM: 'Unasigned',
PM_ID: 5
}
]
});
}
public setBGData(data: any[]) {
let Definitions: any = [];
data.map(obj => {
Object
.keys(obj)
.map(val => {
const mappedData = {
key: obj.BG_ID,
text: obj.BG
}
Definitions.push(mappedData);
})
})
Definitions = Definitions.filter((column: any, index: any, self: any) =>
index === self.findIndex((colAtIndex: any) => (
colAtIndex.key === column.key
))
)
return Definitions;
}
public render() {
console.log(this.state.ALL_DATA);
console.log(this.state.BG_DATA);
return (
<div>
<div className="ms-Grid" dir="ltr">
<div className="ms-Grid-row">
<div className="titelMenu">
<div className="ms-Grid-col ms-lg6">
<label> Filter </label>
</div>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-lg2">
<label> YEAR </label>
<Filter cbo={this.state.BG_DATA} />
</div>
<div className="ms-Grid-col ms-lg2">
<label> Business Group </label>
<Filter cbo={this.state.BG_DATA} />
</div>
<div className="ms-Grid-col ms-lg2">
<label> Business Unit </label>
<Filter cbo={this.state.BG_DATA} />
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-lg2">
<label> Vendor </label>
<Filter cbo={this.state.BG_DATA} />
</div>
<div className="ms-Grid-col ms-lg2">
<label> Product Manager </label>
<Filter cbo={this.state.BG_DATA} />
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-lg12">
<label> Grid 1 </label>
<Grid data={this.state.ALL_DATA} />
</div>
</div>
</div>
</div>
);
}
}
export default App;
Filter.tsx:
import { ComboBox } from 'office-ui-fabric-react';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import * as React from 'react';
import { Icbo } from '../model/common_models';
interface IMyCompomentState {
data?: any;
}
interface IMyCompomentProps {
cbo: Icbo[];
}
class Filter extends React.Component<IMyCompomentProps, IMyCompomentState> {
constructor(props: IMyCompomentProps) {
super(props);
}
public render() {
initializeIcons();
return (
<div>
<ComboBox
// onChange={this.onchangedaaa}
autoComplete="on"
options={this.props.cbo}
/>
</div>
);
}
}
export default Filter;
Grid.tsx:
import * as React from 'react';
import {
DetailsList,
DetailsListLayoutMode,
IColumn
} from 'office-ui-fabric-react/lib/DetailsList';
import { IGridData } from '../model/common_models';
import { DefaultButton } from 'office-ui-fabric-react';
const Columns: IColumn[] = [
{
key: 'BG',
name: 'BG',
fieldName: 'BG',
minWidth: 100,
maxWidth: 200,
isResizable: true,
ariaLabel: 'Operations for value'
},
{
key: 'BU',
name: 'BU',
fieldName: 'BU',
minWidth: 100,
maxWidth: 200,
isResizable: true,
ariaLabel: 'Operations for name'
},
{
key: 'Vendor',
name: 'Vendor',
fieldName: 'Vendor',
minWidth: 100,
maxWidth: 200,
isResizable: true,
ariaLabel: 'Operations for name'
},
{
key: 'PM',
name: 'PM',
fieldName: 'PM',
minWidth: 100,
maxWidth: 100,
isResizable: true,
ariaLabel: 'Operations for name'
},
{
key: 'Delete',
name: 'Delete',
fieldName: 'delete',
minWidth: 50,
maxWidth: 100,
isResizable: true,
ariaLabel: 'Operations for value'
}
];
interface IMyCompomentState {
data: IGridData[];
}
interface IMyCompomentProps {
data: IGridData[];
}
export class Grid extends React.Component<IMyCompomentProps, IMyCompomentState>
{
constructor(props: IMyCompomentProps) {
super(props);
console.log(this.props)
this.state = {
data: []
};
console.log(this.state.data);
}
public render() {
return (
<div>
<DetailsList
items={this.props.data}
columns={Columns}
setKey="set"
layoutMode={DetailsListLayoutMode.fixedColumns}
onItemInvoked={this._onItemInvoked}
onRenderItemColumn={this._onRenderItemColumn}
/>
</div>
);
}
public _onItemInvoked(item: any): void {
alert(`Doppelklick: ${item.BU}`);
}
private _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {
if (column.fieldName === 'delete') {
return <DefaultButton>+</DefaultButton>;
}
return item[column.fieldName!];
}
}
export default Grid;
common_models.ts:
export interface IGridData {
BG_ID: number;
BG: string;
BU_ID: number;
BU: string;
Vendor: string;
PM: string;
PM_ID: number;
}
export interface Icbo {
key: number;
text: string;
}
感谢您为我解决问题提供的任何答案。
谢谢!
我对具有一个handleChange的Material UI进行了变通,以解决All Select Box。
这也是解决方案的链接: 在Reactjs中创建依赖字段?
<div className="ms-Grid-col ms-lg2">
<Select
fullWidth={true}
value={this.state.BG_selected}
onChange={this.handleChange}
inputProps={{
name: 'Groupy'
}}
autoWidth={true}
>
{this.state.BG_DATA.map(item => (
<MenuItem key={item.key} value={item.key}>
{item.text}
</MenuItem>
))}
</Select>
<FormHelperText>Select Business Group</FormHelperText>
</div>
<div className="ms-Grid-col ms-lg2">
<Select
fullWidth={true}
value={this.state.BU_selected}
onChange={this.handleChange}
inputProps={{
name: 'Unity'
}}
autoWidth={true}
>
{this.state.BU_DATA.map(item => (
<MenuItem key={item.key} value={item.key}>
{item.text}
</MenuItem>
))}
</Select>
<FormHelperText>Select Business Unit</FormHelperText>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.