React 함수가 하위 구성 요소에서 작동하지 않습니다.

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

업데이트 : 이것은 반응 - 정류 가능 삼키기 클릭 이벤트로 인한 것입니다. 요소에 pressDelay 소품을 설정하면 클릭 기능이 실행됩니다.