reactjs - 如何从 React Typescript 中的通用数组中删除项目？

Question

有人可以告诉我如何删除新创建的数组中的对象吗？参数“index”在这种情况下效果不佳，因为它实际上不是新创建数组的索引。

我正在 onchange 事件中创建新数组。

我在这里包含了完整的代码。以防万一有人有想法。

import * as React from 'react';
import styles from './ListItems.module.scss';
import { IListItemsProps } from './IListItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import  {DropdownBasicExample} from './DropdownExample'
import { IDropdownOption, DropdownMenuItemType } from 'office-ui-fabric-react';
import { DropdownBasicExample2 } from './Dropdown2.Basic.Example';

export interface IListItemsState{
  selectedItems:IDropdownOption[];
  selectedSite:IDropdownOption;
}

export default class ListItems extends React.Component<IListItemsProps, IListItemsState> {
  private myWeb:IDropdownOption;

  constructor(props){
    super(props);
      this.state = {
        selectedItems:[],
        selectedSite:null
      }
  }

  private sites = [
    { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
    { key: 'A', text: 'Site a', title: 'I am Site a.' },
    { key: 'B', text: 'Site b' },
    { key: 'C', text: 'Site c' },
    { key: 'D', text: 'Site d' },
    { key: 'E', text: 'Site e' },
     { key: 'F', text: 'Site f' },
    { key: 'G', text: 'Site g' },
    { key: 'H', text: 'Site h' },
    { key: 'I', text: 'Site i' },
    { key: 'J', text: 'Site j' }
  ];

  private loadSites= (): Promise<IDropdownOption[]> => {
    return new Promise<IDropdownOption[]>((resolve: (sites: IDropdownOption[]) => void, reject: (error: any) => void) => {
      setTimeout(() => {
        resolve(this.sites);
      }, 1000);
    });
  }

  private onChanged = (item: IDropdownOption, index?: number): void => {
    let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
      mySelectedItems = mySelectedItems.filter(selectedItem => selectedItem !== item);
  }

  this.setState({
    selectedItems: mySelectedItems
  });


    console.log(mySelectedItems);


  }


  public render(): React.ReactElement<IListItemsProps> {
    const {selectedSite} = this.state;
    return (
      <div className={styles.listItems}>


      <DropdownBasicExample loadOptions={this.loadSites} onChanged={this.onChanged}   />       

              <div id="showItems"></div>
              <ul>{
                this.state.selectedItems.map((site:IDropdownOption)=> {
                return <li>{site.text}</li>
              })
              }

              </ul>
              <div>selected Site {
              selectedSite ? selectedSite.key: "is empty"                
                }</div>
      </div>
    );
  }

}

---

DropdownBasicExample2

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

import './Dropdown.Basic.Example.scss';
import { BaseComponent, createRef, IBaseProps } from 'office-ui-fabric-react';

export interface IDropdownBasicExample2State{
    selectedItem?:  IDropdownOption;
    selectedItems: IDropdownOption[];
    options: IDropdownOption[];
}


export interface IDropdownBasicExample2Props  extends IBaseProps{
  onChanged?: (option: IDropdownOption, index?: number) => void;
  Options: IDropdownOption[];
}
export class DropdownBasicExample2 extends BaseComponent<IDropdownBasicExample2Props,IDropdownBasicExample2State> {
  private _basicDropdown = createRef<IDropdown>();
  private alphas:IDropdownOption[]; 
  private array2: Array<IDropdownOption>;
  constructor(props: IDropdownBasicExample2Props) {
    super(props);
    this.state = {
      selectedItem: null,
      selectedItems: [],
      options:[]
    };
  }

componentDidMount(){

}

  public render() {
    const { selectedItem, selectedItems } = this.state;

    return (
      <div className="docs-DropdownExample">


        <Dropdown
          placeHolder="Select options"
          label="Multi-Select controlled example:"
          selectedKey={selectedItem ? selectedItem.key : undefined}
          key={selectedItem ? selectedItem.key : undefined}
          onChanged={this.onChangeMultiSelect}
          multiSelect
          options={this.props.Options}
        />

      </div>
    );
  }

  public onChangeMultiSelect = (item: IDropdownOption,index:number): void => {

    this.props.onChanged(item,index);
  };

}

Answer 1

您可以过滤数组中的项目。

private onChanged = (item: IDropdownOption, index?: number): void => {
  let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
    mySelectedItems = mySelectedItems.filter(
      selectedItem => selectedItem !== item
    );
  }

  this.setState({
    selectedItems: mySelectedItems
  });
};