Мобильная версияВведите описание изображения здесь < /p>
Вот весь мой код. Я провел много времени, но все еще не могу найти проблему. Интересно, может ли кто -нибудь с опытом предоставить некоторые указания или решение, которое поможет мне решить эту проблему. Еще раз спасибо! < /P>
a. Объяснение :
(1) В начале выполнения программы функция OnoPen () вызывается для извлечения параметров из поля Backend Choice в конкретном списке, а затем вставьте извлеченные параметры в раскрывающий список.
componentDidMount() {
console.log('componentDidMount has been called');
if (this.props.onOpen) {
this.props.onOpen();
}
}
public onOpen(): void {
console.log('onOpen() ==> I am here.');
this.loadChoiceFieldOptions(); // Load machine options
}
private async loadChoiceFieldOptions(): Promise {
console.log('loadChoiceFieldOptions() ==> I am here.');
try {
const listId = '5dadf73c-117d-44ea-a755-23cb4786ea95'; // 換成你的清單 GUID
const fieldInternalName = '_x6a5f__x53f0__x7de8__x865f_'; // ({
key: choice,
text: choice
}));
this.render(); // Re-render to update the machine options
} catch (error) {
console.error('載入機台選項錯誤:', error);
this.machineOptions = [];
this.render(); // Re-render to update the message
}
}
(2) В функции рендеринга я генерирую раскрывающий список.
{
console.log('Dropdown onChange fired!', option);
}}
selectedKey={this.state.machineId || 'placeholder'}
/>
(3) Однако в классе rdassearchpanel существует еще один процесс рендеринга (я не уверен, что это неверно)
export default class RdasSearchPanel extends BaseDialog {
private machineOptions: IDropdownOption[] = [];
public render(): void {
ReactDOM.render(
this.close()}
onOpen={() => this.onOpen()}
machineOptions={this.machineOptions}
/>,
this.domElement
);
}
< /code>
b. Вот весь мой код.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BaseDialog } from '@microsoft/sp-dialog';
import { Panel, PanelType, TextField, PrimaryButton, MessageBar, MessageBarType, Dropdown, IDropdownOption } from 'office-ui-fabric-react';
import { sp } from '@pnp/sp/presets/all';
export interface IRdasSearchPanelState {
projectCode: string;
lotNumber: string;
machineId: string;
items: any[];
message: string;
machineOptions: IDropdownOption[];
searchQuery: string;
}
class RdasSearchPanelContent extends React.Component {
constructor(props: any) {
super(props);
this.state = {
projectCode: '',
lotNumber: '',
machineId: '',
items: [],
message: '',
machineOptions: props.machineOptions || [],
searchQuery: ''
};
}
componentDidMount() {
console.log('componentDidMount has been called');
if (this.props.onOpen) {
this.props.onOpen();
}
}
componentDidUpdate(prevProps: any) {
if (prevProps.machineOptions !== this.props.machineOptions) {
this.setState({ machineOptions: this.props.machineOptions });
}
}
handleInputChange = (event: React.FormEvent): void => {
const target = event.target as HTMLInputElement;
const name = target.name;
const value = target.value;
this.setState({ [name]: value } as unknown as Pick);
};
handleDropdownChange = (event: React.FormEvent, option?: IDropdownOption): void => {
console.log('handleDropdownChange ==> I am here.');
if (option && option.key !== 'placeholder') {
this.setState({ machineId: option.key as string });
}
};
filterMachineOptions = (): IDropdownOption[] => {
return this.state.machineOptions.filter(option => option.text.toLowerCase().includes(this.state.searchQuery.toLowerCase()));
};
searchListItems = async (): Promise => {
try {
const { projectCode, lotNumber, machineId } = this.state;
const baseUrl = window.location.origin;
const url = `${baseUrl}/Lists/List4/AllItems.aspx?useFiltersInViewXml=1&FilterField1=LinkTitle&FilterValue1=${projectCode}&FilterField2=_x6279__x865f_&FilterValue2=${lotNumber}&FilterField3=_x6a5f__x53f0__x7de8__x865f_&FilterValue3=${machineId}`;
window.location.href = url;
} catch (error) {
console.error('Error searching list items: ', error);
this.setState({
message: 'Error searching list items'
});
}
};
render() {
const defaultOption: IDropdownOption = { key: 'placeholder', text: '請選擇機台' };
return (
isLightDismiss={false}
isOpen={true}
type={PanelType.medium}
onDismissed={this.props.onDismiss}
>
Hello there from my custom Panel
this.setState({ searchQuery: (event.target as HTMLInputElement).value })}
/>
{
console.log('Dropdown onChange fired!', option);
}}
selectedKey={this.state.machineId || 'placeholder'}
/>
{this.state.message &&
{this.state.message}
}
{this.state.items.length > 0 &&
- {this.state.items.map(item => (
- {item.Title}
))}
Project Code: {this.state.projectCode}
Lot Number: {this.state.lotNumber}
Machine ID: {this.state.machineId}
);
}
}
export default class RdasSearchPanel extends BaseDialog {
private machineOptions: IDropdownOption[] = [];
public render(): void {
ReactDOM.render(
this.close()}
onOpen={() => this.onOpen()}
machineOptions={this.machineOptions}
/>,
this.domElement
);
}
public onOpen(): void {
console.log('onOpen() ==> I am here.');
this.loadChoiceFieldOptions(); // Load machine options
}
private async loadChoiceFieldOptions(): Promise {
console.log('loadChoiceFieldOptions() ==> I am here.');
try {
const listId = '5dadf73c-117d-44ea-a755-23cb4786ea95'; // 換成你的清單 GUID
const fieldInternalName = '_x6a5f__x53f0__x7de8__x865f_'; // ({
key: choice,
text: choice
}));
this.render(); // Re-render to update the machine options
} catch (error) {
console.error('載入機台選項錯誤:', error);
this.machineOptions = [];
this.render(); // Re-render to update the message
}
}
}
Подробнее здесь: https://stackoverflow.com/questions/795 ... pdown-list
