Reactjs 在React中的render（）方法中显示选定选项

我正在学习React，我正在努力实现以下目标： 我使用下拉列表，允许用户选择多个项目。然后，我尝试将每个选定选项添加到一个数组中。然后我将在渲染方法中显示选定的项目（选项），但它不起作用

稍后，我想将这个组件转换成一个可重用的组件，以便执行级联

因此，我的问题是：

1) how can I add each selected option into an array
2) iterate through the array and display items inside the render method
3) how to make this component reusable

下图显示数组的长度为1，但我无法显示项目。它是空的。

以下是我目前掌握的代码：

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 { IBaseProps,BaseComponent, createRef } from 'office-ui-fabric-react';

export interface IDropdownBasicExampleProps extends IBaseProps {
  loadOptions: () => Promise<IDropdownOption[]>;
  onChanged: (option: IDropdownOption, index?: number) => void;
}

export interface IDropdownBasicExampleState {
    selectedItem?: IDropdownOption;
    selectedItems: IDropdownOption[];
    loading: boolean;
    options: IDropdownOption[];
    selectedKey: string | number;
    error: string;
}
export class DropdownBasicExample extends BaseComponent<IDropdownBasicExampleProps,IDropdownBasicExampleState> {
  private _basicDropdown = createRef<IDropdown>();
  private selItem:IDropdownOption;
  constructor(props:IDropdownBasicExampleProps,state:IDropdownBasicExampleState) {
    super(props);
    this.state = {
      selectedItem: undefined,
      selectedItems: new Array<IDropdownOption>(),
      loading: true,
      error: undefined,
      options: undefined,
      selectedKey:""
    };

  }

  public componentDidMount(): void {
    this.loadOptions();
  }


  private loadOptions(): void {
    this.setState({
      loading: true,
      error: undefined,
      options: undefined
    });

    this.props.loadOptions()
      .then((options: IDropdownOption[]): void => {
        this.setState({
          loading: false,
          error: undefined,
          options: options
        });
      }, (error: any): void => {
        this.setState((prevState: IDropdownBasicExampleState, props: IDropdownBasicExampleProps): IDropdownBasicExampleState => {
          prevState.loading = false;
          prevState.error = error;
          return prevState;
        });
      });
  }

  public onChangeMultiSelect = (item: IDropdownOption, index): void => {
    const updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : [];
    if (item.selected) {
      // add the option if it's checked
      updatedSelectedItem.push(item.key);
    } else {
      // remove the option if it's unchecked
      const currIndex = updatedSelectedItem.indexOf(item.key);
      if (currIndex > -1) {
        updatedSelectedItem.splice(currIndex, 1);
      }
    }
    this.setState({
      selectedItems: updatedSelectedItem,
      //selectedItem:item
    });

    if (this.props.onChanged) {
       this.props.onChanged(this.state.selectedItem, index);
    }

    console.log(this.state.selectedItems);
  };

  public copyArray = (array: any[]): any[] => {
    const newArray: any[] = [];
    for (let i = 0; i < array.length; i++) {
      newArray[i] = array[i];
    }
    return newArray;
  };


  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}
          //selectedKeys={selectedItems}
          onChanged={this.onChangeMultiSelect}

          multiSelect
          options={this.state.options}
        />

    <div>length: {this.state.selectedItems.length}</div>

            {this.state.selectedItems.map((item:IDropdownOption)=>{
              return <div>key: {item.key} {item.selected} {item.text} {item.index}</div>
            })}
       </div>
    );
  }


}

import*as React from'React'；
从“office ui fabric react/lib/Button”导入{PrimaryButton}；
从“office ui fabric react/lib/Dropdown”导入{Dropdown，IDropdown，DropdownMenuItemType，IDropdownOption}；
导入“./Dropdown.Basic.Example.scss”；
从“office ui fabric react”导入{IBaseProps，BaseComponent，createRef}；
导出接口IDropdownBasicExampleProps扩展IBaseProps{
加载选项：（）=>承诺；
onChanged:（选项：idropdownpoption，索引？：number）=>void；
}
导出接口IDropdownBasicExampleState{
选择EdItem？：iDropDown选项；
selectedItems:idropdownpoption[]；
加载：布尔；
选项：IDropdownOption[]；
selectedKey：字符串|数字；
错误：字符串；
}
导出类DropdownBasicExample扩展BaseComponent{
private _basicDropdown=createRef（）；
私有选择项：IDROPDONOPTION；
构造函数（props:IDropdownBasicExampleProps，state:IDropdownBasicExampleState）{
超级（道具）；
此.state={
selectedItem：未定义，
selectedItems:new Array（），
加载：对，
错误：未定义，
选项：未定义，
selectedKey:“
};
}
公共组件didmount（）：void{
这是loadOptions（）；
}
私有加载选项（）：void{
这是我的国家({
加载：对，
错误：未定义，
选项：未定义
});
this.props.loadOptions（）
。然后（（选项：idropdownpoption[]）：void=>{
这是我的国家({
加载：false，
错误：未定义，
选项：选项
});
}，（错误：any）：void=>{
this.setState（（prevState:IDropdownBasicExampleState，props:IdropDownBasicExampleSprops）：IDropdownBasicExampleState=>{
prevState.loading=false；
prevState.error=错误；
返回状态；
});
});
}
public onchangemultipselect=（项：idropdownpoption，索引）：void=>{
const updated selecteditem=this.state.selectedItems？this.copyArray（this.state.selectedItems）：[]；
如果（选定项）{
//如果选中，则添加该选项
更新的selecteditem.push（item.key）；
}否则{
//如果未选中该选项，请将其删除
const currendex=updatedSelectedItem.indexOf（item.key）；
如果（当前索引>-1）{
更新的SelectedItem.splice（currIndex，1）；
}
}
这是我的国家({
selectedItems:updatedSelectedItem，
//选择编辑项：项目
});
如果（此.props.onChanged）{
this.props.onChanged（this.state.selectedItem，index）；
}
console.log（this.state.selectedItems）；
};
public copyArray=（数组：any[]）：any[]=>{
常量newArray:any[]=[]；
for（设i=0；i{
返回键：{item.key}{item.selected}{item.text}{item.index}
})}
);
}
}

第一次定义状态

this.state = {
    checkbox_value: []
}

然后定义复选框，例如：

<input onChange = { this.checkboxValue.bind(this) } value = "0" type="checkbox" />
<input onChange = { this.checkboxValue.bind(this) } value = "2" type="checkbox" /> 

---

然后，可以使用复选框值的map（）方法在渲染中显示选中的值。希望对您有用

谢谢您的回复。我无法使用复选框，因为我正在使用office ui fabric中的下拉组件。你建议的大部分东西我都包括在内了。稍后我会尝试一下，并让您知道。谢谢，但在图像中的每个下拉元素中都有chenkbox。我认为这是相同的逻辑。您可以将我的每个复选框元素替换为类似的下拉元素。）

checkboxValue(event){

    let checked_list = this.state.checkbox_value;
    let check =  event.target.checked;
    let value =  event.target.value; 
    if(check){
        this.setState({
            checkbox_value: [...this.state.checkbox_value, value]
        });
    }else{
        var index = checked_list.indexOf(event.target.value);
        if (index > -1){
            checked_list.splice(index, 1);
        }
        this.setState({
            checkbox_value: checked_list
        })
    }

}