javascript - 使用下拉列表按字母顺序 a-z 和 z-a 排序

Question

I working on a react app where I am displaying movies data. I want to sort data based on Title from a-z and z-a by selecting from dropdown. Check the below code. Unable to sort correctly with this approach. As I see there is problem in onSorting

App.js-

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sort_term: '', movies: data.movies
    }
    this.onSorting = this.onSorting.bind(this);
  }
  onSorting(e) {
    let term = e.target.value;
    const sortedList = this.state.movies.sort((a, b) => {
      if (a[term] > b[term]) return 1;
      if (b[term] > a[term]) return -1;
      return 0;
    });
    this.setState({ sort_term: term });
    this.setState({ movies: sortedList });
  }


  render() {
    const { movies } = this.state;

    return (
      <div className="App">
        <Header sort_term={this.state.sort_term}
          onSorting={this.onSorting} />

        {movies.length === 0 ?
          <h1>Loading Movies</h1> :
          <Table movies={this.state.movies} />}

      </div>
    );
  }
}

Header.js - here is the dropdown box with two options

class Header extends Component {
    render() {
        const { sort_term, onSorting } = this.props;

        return (
            <div className="nav">
                <ul className="navLeft">
                    <li >
                        <form >
                            <select value={sort_term}
                                onChange={onSorting}
                                className="searchBar">
                                <option value="Title"> Sort (A - Z)</option>
                                <option value="Title"> Sort (Z - A) </option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>
        );
    }
}

Table.js-

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const list = this.props.movies.map((movie) => (
            <tr key={movie.Title}>
                <td>{movie.Title}</td>
                <td>{movie.Director}</td>
            </tr>
        )
        );

        return (
            <div className="table">
                <table>
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Director</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list}
                    </tbody>
                </table>
            </div>
        );
    }
}

Answer 1

实际上，您的代码可以正常工作，但由于您对 A-Z 进行了排序，因此您可能看不出其中的区别。只需像这样更改排序函数的相关部分:

if (a[term] > b[term]) return -1;
if (b[term] > a[term]) return 1;

编辑:如果你有一个未排序的数组，你的代码应该可以工作。我用排序列表尝试过，这就是我告诉你更改顺序的原因。

const movies = [
  { Title: "poo", Director: "poo" },
  { Title: "foo", Director: "bar" },
  { Title: "zoo", Director: "moo" },
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sort_term: '', movies,
    }
    this.onSorting = this.onSorting.bind(this);
  }

  
  onSorting(e) {
    let term = e.target.value;
    const sortedList = [...this.state.movies].sort((a, b) => {
      return a[term].localeCompare(b[term]);
    });
    this.setState({ sort_term: term });
    this.setState({ movies: sortedList });
  }


  render() {
    const { movies } = this.state;

    return (
      <div className="App">
        <Header sort_term={this.state.sort_term}
          onSorting={this.onSorting} />

        {movies.length === 0 ?
          <h1>Loading Movies</h1> :
          <Table movies={this.state.movies} />}

      </div>
    );
  }
}

class Header extends React.Component {
  render() {
    const { sort_term, onSorting } = this.props;

    return (
      <div className="nav">
        <ul className="navLeft">
          <li >
            <form >
              <select value={sort_term}
                onChange={onSorting}
                className="searchBar">
                <option value="Title"> Sort (A - Z)</option>
                <option value="Title"> Sort (Z - A) </option>
              </select>
            </form>
          </li>
        </ul>
      </div>
    );
  }
}

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const list = this.props.movies.map((movie) => (
      <tr key={movie.Title}>
        <td>{movie.Title}</td>
        <td>{movie.Director}</td>
      </tr>
    )
    );

    return (
      <div className="table">
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>Director</th>
            </tr>
          </thead>
          <tbody>
            {list}
          </tbody>
        </table>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

但是，您的代码中没有排序方向逻辑。您正在使用相同的排序函数，它现在进行单向排序。

另外，不要像那样直接使用状态，因为你正在改变它。使用 concat 或类似的东西:

const sortedList = [...this.state.movies].sort((a, b) => {
      if (a[term] > b[term]) return -1;
      if (b[term] > a[term]) return 1;
      return 0;
});

更好的是，您可以使用 localCompare 使排序更加可靠。感谢@msbit 的评论和指出。

const sortedList = [...this.state.movies].sort((a, b) => {
      return a[term].localeCompare(b[term]);
});