在变更问题上对移动设备进行多选反应

Question

我有一个简单的multiselect下拉组件，它可以正常工作。使用移动设备时出现此问题。出于某种原因，如果我从下拉列表的底部开始选择值，一切都很好，但是从顶部选择第一项时，状态会更新为其值，第二个选择项会将状态设置为空，第三项将状态设置为空（第一个值不再处于状态），第四个拣选将状态设置为空，第五个为其状态（第一个和第三个不再存在）。这就是模式。

handleOnChange = event => {
  const {
    name,
    onChange,
    value
  } = this.props;
  let targets = [...value];

  if (!event.target.value) {
    onChange({
      currentTarget: {
        name,
        value: []
      }
    });
    return;
  }

  if (!targets.some(v => v === event.target.value)) {
    targets.push(event.target.value);
    onChange({
      currentTarget: {
        name,
        value: targets
      }
    });
    return;
  }

  if (targets.some(v => v === event.target.value)) {
    onChange({
      currentTarget: {
        name,
        value: targets.filter(target => target !== event.target.value)
      }
    });
    return;
  }
};

<select
  size="3"
  name={name}
  className="custom-select"
  multiple
  onChange={this.handleOnChange}
  value={value}
  >
  {dropDlist.map(item => (
  <option key={item._id} value={item.value}>
    {item.name}
  </option>
  ))}
</select>
{error && 
<div className="alert alert-danger">{error}</div>
}
</div>