具有可选和可排序元素的列表

Question

代码包括使元素列表可排序(拖动在右边)和可选择的元素列表(单击文本)。然而，这似乎有点太复杂了。

https://codesandbox.io/s/434p397p74

是否有可能简化/改进？

缺少的良好做法是什么？

PS:我是一个反应的初学者。我为可排序部件使用了一个库，并制作了可选择的部分。

index.js

import React from "react";
import ReactDOM from "react-dom";
import {
  SortableContainer,
  SortableElement,
  arrayMove
} from "react-sortable-hoc";
import { SelectableList, SelectableItem } from "./selectable";
import { SortableHandler } from "./sortable";

import "./styles.css";

function Item(props) {
  return (
    <li>
      <SelectableItem item={props.value} index={props.sortIndex} /> -{" "}
      <SortableHandler />
    </li>
  );
}
const SortableItem = SortableElement(Item);

function List({ children }) {
  return (
    <ul>
      <SelectableList>{children}</SelectableList>
    </ul>
  );
}
const SortableList = SortableContainer(List);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
    };
  }

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

  render() {
    let items = [];
    for (let i in this.state.items) {
      items.push(
        <SortableItem
          value={this.state.items[i]}
          index={parseInt(i)}
          sortIndex={this.state.items[i]}
          key={i}
        />
      );
    }

    return (
      <SortableList
        onSortEnd={this.onSortEnd}
        useDragHandle={true}
        axis="y"
        lockAxis="y"
        lockOffset={["0%", "0%"]}
        lockToContainerEdges={true}
        useContainerAsSortableHelperParent={true}
      >
        {items}
      </SortableList>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

selectable.js

import React from "react";

const SelectableContext = React.createContext({
  activeIndex: null,
  setActiveIndex: () => {}
});

export class SelectableList extends React.Component {
  constructor(props) {
    super(props);
    this.container = React.createRef();

    this.state = {
      activeIndex: null,
      setActiveIndex: this.setActiveIndex.bind(this)
    };
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside(event) {
    if (
      this.container.current &&
      !this.container.current.contains(event.target)
    ) {
      this.setActiveIndex(null);
    }
  }

  setActiveIndex(index) {
    this.setState({
      activeIndex: index
    });
  }

  render() {
    return (
      <SelectableContext.Provider value={this.state}>
        <div className="selectable-container" ref={this.container}>
          {this.props.children}
        </div>
      </SelectableContext.Provider>
    );
  }
}

export class SelectableItem extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(context) {
    context.setActiveIndex(this.props.index);
  }

  render() {
    return (
      <SelectableContext.Consumer>
        {context => {
          return (
            <span
              style={{
                color:
                  context.activeIndex === this.props.index ? "red" : "black"
              }}
              onClick={() => {
                this.onClick(context);
              }}
            >
              {this.props.item}
            </span>
          );
        }}
      </SelectableContext.Consumer>
    );
  }
}

sortable.js

import React from "react";
import { SortableHandle } from "react-sortable-hoc";

const SortableHandler = SortableHandle(function() {
  return (
    <span
      style={{ border: "1px solid black", padding: "2px", fontSize: "10px" }}
    >
      Drag
    </span>
  );
});

export { SortableHandler };

react-sortable-hoc

https://github.com/clauderic/react-sortable-hoc

Answer 1

要允许管理几个组件共有的状态，但其层次结构是间接的(这是管理所选内容的组件的情况)，最简单的方法是使用Redux。

正式文件：

https://redux.js.org/

对于初学者来说，这是一个非常好的教程：

https://www.valentinog.com/blog/react-redux-tutorial-beginners/