我想在單擊按鈕一次時顯示消息，而在單擊按鈕兩次時顯示警報

Question

我已經使用按鈕對表進行排序並顯示消息，但是我想根據按鈕的單擊來顯示消息。如果單擊一次，則顯示按鈕單擊一次，否則按鈕單擊兩次。

這是我的CSS，用於顯示：

  # app {
      font - family: 'Open Sans', sans - serif;.table {
          margin: 1e m;
          display: flex;
          flex - direction: column;
      }.header, .row {
          display: flex;
          div {
              flex: 1;
              padding: 0.2 rem 0.4e m;
              border: 1 px solid rgb(238, 238, 238);
          }
      }.header {
          background - color: rgb(238, 238, 238);
          div {
              cursor: pointer;
          }
      }
  }.search - results {
      color: red;
  }

這是我的reactjs代碼：

const Row = ({ id, title, priority, type, complete }) => (
              <div className="row">
                {" "}
                <div> {id} </div> <div> {title} </div> <div> {priority} </div>{" "}
                <div> {type} </div> <div> {complete} </div>{" "}
              </div>
            );
            class Table extends React.Component {
              constructor(props) {
                super(props);
                this.state = {
                  data: [
                    {
                      id: 403,
                      title: "Task 403",
                      priority: "High",
                      type: "Improvement",
                      complete: 100
                    },
                    {
                      id: 532,
                      title: "Task 532",
                      priority: "Medium",
                      type: "Improvement",
                      complete: 30
                    },
                    {
                      id: 240,
                      title: "Task 240",
                      priority: "High",
                      type: "Story",
                      complete: 66
                    }
                  ]
                };
                this.compareBy.bind(this);
                this.sortBy.bind(this);
              }
              compareBy(key) {
                return function(a, b) {
                  if (a[key] < b[key]) return -1;
                  if (a[key] > b[key]) return 1;
                  return 0;
                };
              }
              sortBy(key) {
                let arrayCopy = [...this.state.data];
                arrayCopy.sort(this.compareBy(key));
                this.setState({
                  data: arrayCopy
                });
                this.state.showres = [false];
              }
              render() {
                const rows = this.state.data.map(rowData => <Row {...rowData} />);
                return (
                  <div className="table">
                    {" "}
                    <div className="header">
                      {" "}
                      <div> ID </div> <div> Title </div> <div> Priority </div>{" "}
                      <div> Issue Type </div> <div> % Complete </div>{" "}
                    </div>{" "}
                    <div className="body"> {rows} </div> <br />{" "}
                    <div>
                      {" "}
                      <input
                        type="submit"
                        value="Sort"
                        onClick={() => this.sortBy("complete")}
                       onDoubleClick={() =>this.sortBy('id')} />{" "}
                       {this.state.showres ? <Results /> : null}{" "}
                    </div>{" "}
                  </div>
                );
              }
            }
            var Results = React.createClass({
              render: function() {
                return (
                if(props.onClick)
                  <div id="results" className="search-results">
                    {" "}
                    <br /> button has been clicked once{" "}
                 else{
               alert("button clicked twice");
                  </div>
                );
              }
            });


ReactDOM.render(<Table />, document.getElementById("app"));

這是我的html頁面：

 <div id="app"></div>

這兩個按鈕正在對數據進行排序，但是顯示的是相同的消息！

Answer 1

當您修改問題時，我假設您要實現：

1. 每次單擊按鈕都會切換排序行為
2. 您想對每一列進行排序
3. 在所有排序選項之后，單擊按鈕應關閉排序

const columns = ['id', 'title', 'priority', 'type', 'complete']

const Row = ({data}) => (
    <div className="row">
        {columns
           .map(columnName =>
             <div key={data.id + columnName}>{data[columnName]}</div>)
        }
    </div>
  );

  const data = [
    {
      id: 403,
      title: 'Task 403',
      priority: 'High',
      type: 'Improvement',
      complete: 100,
    },
    {
      id: 532,
      title: 'Task 532',
      priority: 'Medium',
      type: 'Improvement',
      complete: 30,
    },
    {
      id: 240,
      title: 'Task 240',
      priority: 'High',
      type: 'Story',
      complete: 66,
    },
  ];

  const sortKeys = [null, ...columns];
  const compareBy = key => (a, b) => {
    if (!key) return 0;
    if (a[key] < b[key]) return -1;
    if (a[key] > b[key]) return 1;
    return 0;
  };

  const Results = ({ sortKeyIndex }) => (sortKeyIndex ? <span>Sorted by {sortKeys[sortKeyIndex]}</span> : <span>Original order</span>);

  class Table extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        tableData: props.data,
        sortKeyIndex: 0,
      };
      this.sortBy.bind(this);
    }

    sortBy() {
      const arrayCopy = [...this.props.data];
      const sortKeyIndex = (this.state.sortKeyIndex + 1) % sortKeys.length;
      arrayCopy.sort(compareBy(sortKeys[sortKeyIndex]));
      this.setState(() => ({
        tableData: arrayCopy,
        sortKeyIndex,
      }));
    }


    render() {
      const { tableData, sortKeyIndex } = this.state;
      return (
        <div className="table">
          <div className="header">
            <div> ID </div>
            <div> Title </div>
            <div> Priority </div>
            <div> Issue Type </div>
            <div> % Complete </div>
          </div>
          <div className="body">
            {tableData.map(rowData => <Row key={rowData.id} data={rowData} />)}
          </div>
          <br />
          <div>
            <input
              type="submit"
              value="Sort"
              onClick={() => this.sortBy()}
            />
          </div>
            <Results sortKeyIndex={sortKeyIndex} />
        </div>
      );
    }
  }

  ReactDOM.render(<Table data={data} />, document.getElementById('myApp'));