Question

我正在使用react-beautiful-dnd，并从教程中复制了代码以构建可拖动列表。它的工作原理如下：

这是构建此代码的代码：https://github.com/DDavis1025/react-beautiful-dnd

但是，现在我正在尝试实现自己的列表，该列表是一个播放列表，该播放列表使用输入将用户计算机中的歌曲添加到列表中：

它正在部分工作，但是我无法将列表项拖动到位（它总是回到相同的顺序）。这是我更改的代码：

column-test.jsx

export default class ColumnTest extends React.Component {
constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

    this.inputRef = React.createRef();

    this.state = {
      files: [],
      audio: '',
    };

  }



handleClick = event => {

  // Helper code to read file and return promise
  const readFile = (file) => {

    const fileList = [];

    const fileReader = new FileReader();

    // create the promise and return it
    return new Promise((resolve, reject) => {

      // if file reader has an error, report it
      fileReader.onerror = (error) => {
        reject({ error })
      }

      // if success, resolve the promise
      fileReader.onload = (e) => {
        resolve({
          name: file.name,
          link: e.target.result
        })
      }

      // start reading the file
      fileReader.readAsDataURL(file);

    })
  }


  // create all the file reader promises
  // create an array from the files list and use map to generate
  // an array of promises
  const allReaders = Array.from(event.target.files).map(readFile)

  // Now handle the array of promises we just created
  Promise.all(allReaders)
    .then(fileList => {
      console.log(fileList)
      // set the state that we have all the files
      this.setState({ files: fileList });
    })
    .catch(error => { 
       console.error(error)
    });


}





  render() {
      return (
      <div className="downloadMusic">
      <div className="input">
        <input
          onChange={this.handleClick}
          id="upload-file"
          className="inputName"
          type="file"
          multiple
          ref={this.inputRef}
        />
        </div>
        <div className="audio-player">

       <audio
       controls
       autoPlay
       src={this.state.audio}
        />
         </div>



        <Container>
           <Title>{this.props.column.title}</Title>
           <Droppable droppableId={this.props.column.id}>
            {provided => (
             <TaskList
               ref={provided.innerRef} {...provided.droppableProps}>
              {this.state.files.map((file, index) => (
               <TaskTest key={file.link} file={file} index={index} />
              ))}
              {provided.placeholder}

             </TaskList>

             )}
            </Droppable>
        </Container>

        </div>
        );
  }
}

（在这里我添加输入和fileReader以将文件添加到我的文件数组，并使用render {}中的return（）中的.map（）函数遍历这些文件）

task-test.jsx

export default class TaskTest extends React.Component {
    render() {
        return (
          <Draggable draggableId={this.props.file.link} index={this.props.index}>
           {(provided, snapshot) => (
            <Container
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              ref={provided.innerRef}
              isDragging={snapshot.isDragging}
            >
            {this.props.file.name}
            </Container>
           )}
          </Draggable>
          );
     }

}

Answer 1

react-beautiful-dnd要求您管理自己的列表，这意味着在“删除”某项后重新排列数组。要做到这一点，您需要添加一些内容：

处理“掉落”的功能

  onDragEnd(result) {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const files = reorder(
      this.state.files,
      result.source.index,
      result.destination.index
    );

    this.setState({
      files
    });
  }

在构造函数中绑定onDragEnd

this.onDragEnd = this.onDragEnd.bind(this);

对数组重新排序的功能

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

可放置对象周围的DragDropContext

<DragDropContext onDragEnd={this.onDragEnd}> 
    <Droppable droppableId={this.props.column.id}>
    ...

您可以在此处查看示例：https://codesandbox.io/s/k260nyxq9v

使用react-beautiful-dnd列出未保留的项目

1 个答案: