Question

我正在尝试使用一个函数来删除使用React Dropzone上传的图像并进行反应排序。

我有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

Answer 1

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

Answer 2

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

问题是Matt发现了可排序的吞下onClick事件。但是我们可以通过设置pressDelay或distance来解决。

对我来说，最好的选择是为可排序列表设置最小距离，并且效果很好

您还可以使用距离道具来设置触发排序之前要拖动的最小距离（例如，您可以将距离设置为1px，例如：distance = {1}）

React函数无法从子组件运行

2 个答案: