1

我正在尝试使一个功能正常工作，该功能可以删除使用 React Dropzone 和 react-sortable 上传的图像。

我有 dropzone 工作，并且排序工作，但由于某种原因，我在可排序项目上拥有的从数组中删除该特定项目的功能不起作用。onClick 事件似乎没有调用该函数。

我的代码如下。

 const SortableItem = SortableElement(({value, sortIndex, onRemove}) =>
      <li>{value.name} <a onClick={() => onRemove(sortIndex)}>Remove {value.name}</a></li>
    );

 const SortableList = SortableContainer(({items, onRemove}) => {
    return (
    <ul>
      {items.map((image, index) => (
        <SortableItem key={`item-${index}`} index={index} value={image} sortIndex={index} onRemove={onRemove} />
      ))}
    </ul>
  );
});

class renderDropzoneInput extends React.Component {

constructor (props) {
    super(props)
    this.state = { files: [] }
    this.handleDrop = this.handleDrop.bind(this)
  }

  handleDrop (files) {
    this.setState({
      files
    });
    this.props.input.onChange(files)
  }

  remove (index){
    var array = this.state.files
    array.splice(index, 1)
    this.setState({files: array })
    this.props.input.onChange(array)
  }

  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      files: arrayMove(this.state.files, oldIndex, newIndex),
    });
  };

  render () {
    const {
        input, placeholder,
        meta: {touched, error}
      } = this.props

    return (
      <div>
        <Dropzone
          {...input}
          name={input.name}
          onDrop={this.handleDrop}
        >
          <div>Drop your images here or click to open file picker</div>
        </Dropzone>
        {touched && error && <span>{error}</span>}


        <SortableList items={this.state.files} onSortEnd={this.onSortEnd} onRemove={(index) => this.remove(index)} />

      </div>
    );
  }
}
export default renderDropzoneInput
4

2 回答 2

0

这是一个老问题，但是像我这样仍然看到这个问题的人可能想阅读这个：https ://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004

问题是，正如马特发现的那样，可排序的临时文件会吞噬 onClick 事件。但是我们可以通过设置pressDelay或来解决问题distance。

对我来说，最好的选择是为可排序列表设置最小距离，它工作得很好

您还可以使用 distance 属性设置在触发排序之前要拖动的最小距离（例如，您可以设置 1px 的距离，如下所示：distance={1}）

于 2018-11-30T14:09:32.280 回答
0

更新：这是由 react-sortable-hoc 吞咽点击事件引起的。在元素上设置一个pressDelay道具可以触发点击功能。

于 2017-11-07T16:22:42.290 回答