如何在ReactJS中添加和删除多个选择框

Question

用户在多个选择框中添加一些数据，当他们单击添加按钮时，他们可以看到右侧的数据和左侧的数据已删除。并且当“删除”按钮的右侧为空时，左侧数据已满

class FieldForm extends React.Component {
  state = {
    itemlist: [
      { label: "Two", id: "2", enabled: true },
      { label: "Three", id: "3", enabled: true },
      { label: "Four", id: "4", enabled: true }
    ],
    itemlist2: [],
    itemsToBeRemovedFromList1: [],
    itemsToBeRemovedFromList2: [],
    selectedItems: []
  };

  onChangeItemList1 = e => {
    const { itemlist, itemsToBeRemovedFromList1 } = this.state;
    const foundItem = itemlist.find(item => item.label == e.target.value);

    let allItems = [...itemsToBeRemovedFromList1, foundItem];

    //add item to the to be removed list
    this.setState({
      itemsToBeRemovedFromList1: [...allItems]
    });
  };

  onChangeItemList2 = e => {
    const { itemlist2, itemsToBeRemovedFromList2 } = this.state;
    const foundItem = itemlist2.find(item => item.label == e.target.value);

    //check for duplicates
    let allItems = [...itemsToBeRemovedFromList2, foundItem];

    //add item to the to be removed list
    this.setState({
      itemsToBeRemovedFromList2: [...allItems]
    });
  };

  handleadd = () => {
    const { itemlist, itemsToBeRemovedFromList1, itemlist2 } = this.state;
    const idsOfToBeRemovedItems = itemsToBeRemovedFromList1.map(
      item => item.id
    );
    const newItemList1 = itemlist.filter(
      item => !idsOfToBeRemovedItems.includes(item.id)
    );

    const newItemList2 = itemlist.filter(item =>
      idsOfToBeRemovedItems.includes(item.id)
    );

    this.setState({
      ...this.state,
      itemlist: newItemList1,
      itemlist2: [...itemlist2, ...newItemList2],
      itemsToBeRemovedFromList1: []
    });
  };

  handleremove = () => {
    const { itemlist, itemsToBeRemovedFromList2, itemlist2 } = this.state;
    const idsOfToBeRemovedItems = itemsToBeRemovedFromList2.map(
      item => item.id
    );
    const newItemList2 = itemlist2.filter(
      item => !idsOfToBeRemovedItems.includes(item.id)
    );

    const newItemList1 = itemlist2.filter(item =>
      idsOfToBeRemovedItems.includes(item.id)
    );

    this.setState({
      ...this.state,
      itemlist: [...itemlist, ...newItemList1],
      itemlist2: newItemList2,
      itemsToBeRemovedFromList2: []
    });
  };

  handleChange = selectedItems => {
    this.setState({ selectedItems });
  };
  render() {
    const { itemlist, itemlist2, selectedItems } = this.state;
    const filteredOptions =
      itemlist && itemlist.filter(o => !selectedItems.includes(o.name));
    console.log(itemlist2);

    return (
      <div>
        <Select
          showSearch
          style={{ width: 200 }}
          placeholder="Select a person"
          optionFilterProp="children"
          onChange={this.onChangeItemList1}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          {itemlist &&
            itemlist.map(item => (
              <Option id={item.id} value={item.label}>
                {item.label}
              </Option>
            ))}
        </Select>
        <button
          onClick={this.handleadd}
          class="btn btn-primary btn-block w-25 margin-bottom"
        >
          <i class="fa fa-arrow-right" /> add
        </button>
        <button
          onClick={this.handleremove}
          class="btn btn-primary btn-block w-25"
        >
          <i class="fa fa-arrow-left" /> remove
        </button>

        <select
          className="custom-select"
          onChange={this.onChangeItemList2}
          multiple
        >
          {itemlist2 &&
            itemlist2.map(item => (
              <option id={item.id} value={item.label}>
                {item.label}
              </option>
            ))}
        </select>
        <Select
          mode="multiple"
          placeholder="Inserted are removed"
          value={selectedItems}
          onChange={this.handleChange}
          style={{ width: "100%" }}
        >
          {filteredOptions.map(item => (
            <Select.Option key={item.label} value={item.label}>
              {item.label}
            </Select.Option>
          ))}
        </Select>

        <select
          className="custom-select"
          onChange={this.onChangeItemmulit2}
          multiple
        >
          {this.state.itemlist2 &&
            this.state.itemlist2.map(item => (
              <option id={item} value={item}>
                {item}
              </option>
            ))}
        </select>
        <div className="col-md-2 ">
          <button
            onClick={this.handleadd}
            class="btn btn-primary btn-block w-25 margin-bottom"
          >
            <i class="fa fa-arrow-right" />
            Add
          </button>
          <button
            onClick={this.handleremove}
            class="btn btn-primary btn-block w-25"
          >
            <i class="fa fa-arrow-left" />
            Remove
          </button>
        </div>
      </div>
    );
  }
}

这是我的两个选择框，一个是单个，另一个是多个。我需要获取与他们两个相同的数据 这是链接https://codesandbox.io/s/ecstatic-euler-4sov0