Реактивная функция не работает от дочернего компонента

Question

Я пытаюсь заставить работать функцию, которая удаляет изображение, загруженное с помощью React 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

Обновление: это было вызвано реакцией глотания на реагирующую сортировку. Настройка pressDelay prop на элементе позволил срабатывать функции click.

Answer 2

Это старый вопрос, но некоторые люди, такие как я, которые все еще видят эту проблему, возможно, захотят прочитать это: https://github.com/clauderic/react-sortable-hoc/issues/111

Проблема в том, что сортируемый hoc проглатывает события onClick, как выяснил Мэтт. Но мы можем иметь обходные пути, установив pressDelay или же distance,

Для меня лучшим вариантом было установить минимальное расстояние для сортируемого списка, и это работало хорошо

Вы также можете использовать опору расстояния, чтобы установить минимальное расстояние, которое будет перетаскиваться до запуска сортировки (например, вы можете установить расстояние в 1 пиксель, например, так: distance={1})