Javascript 我想在一次单击按钮时显示消息，在两次单击按钮时显示警报

我使用了一个按钮对表进行排序并显示消息，但我希望根据按钮单击来显示消息。如果单击一次，则显示按钮单击一次，否则按钮单击两次

这是我的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;
  }

以下是我的代码：

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"));

const行=（{id，title，priority，type，complete}）=>(
{" "}
{id}{title}{priority}{''}
{type}{complete}{”“}
);
类表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{
id:403，
标题：“任务403”，
优先级：“高”，
类型：“改进”，
完成：100
},
{
身份证号码：532，
标题：“任务532”，
优先级：“中等”，
类型：“改进”，
完成日期：30
},
{
id:240，
标题：“任务240”，
优先级：“高”，
键入：“故事”，
完成日期：66
}
]
};
this.compareBy.bind（this）；
这个。肮脏。捆绑（这个）；
}
比较（键）{
返回函数（a，b）{
如果（a[key]b[key]）返回1；
返回0；
};
}
索特比（钥匙）{
让arrayCopy=[…this.state.data]；
arrayCopy.sort（this.compareBy（key））；
这是我的国家({
数据：arrayCopy
});
this.state.showres=[false]；
}
render（）{
const rows=this.state.data.map（rowData=>）；
返回(
{" "}
{" "}
ID标题优先级{“”}
问题类型%Complete{“}
{" "}
{rows}
{''}
{" "}
this.sortBy（“complete”）}
onDoubleClick={（）=>this.sortBy（'id'）}/>{”“}
{this.state.showres？:null}{'}
{" "}
);
}
}
var Results=React.createClass({
render:function（）{
返回(
if（props.onClick）
{" "}

按钮已单击一次{“”}
否则{
警报（“按钮点击两次”）；
);
}
});
ReactDOM.render（，document.getElementById（“app”）；

这是我的html页面：

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

---

这两个按钮对数据进行排序，但显示相同的消息！！！！！！！！！任何了解reactjs的人都可以帮助我。

当您修改问题时，我假设您希望实现：

每次单击按钮都会切换排序行为

您希望对每一列进行排序

完成所有排序选项后，单击“下一步”按钮应关闭排序

const columns=['id'，'title'，'priority'，'type'，'complete']
常量行=（{data}）=>(
{列
.map（columnName=>
{data[columnName]}）
}
);
常数数据=[
{
id:403，
标题：“任务403”，
优先级：“高”，
类型：“改进”，
完成：100，
},
{
身份证号码：532，
标题：“任务532”，
优先顺序：“中等”，
类型：“改进”，
完成日期：30，
},
{
id:240，
标题：“任务240”，
优先级：“高”，
键入：“故事”，
完成日期：66，
},
];
常量排序键=[null，…列]；
const compareBy=key=>（a，b）=>{
如果（！key）返回0；
如果（a[key]b[key]）返回1；
返回0；
};
const Results=（{sortKeyIndex}）=>（sortKeyIndex？按{sortKeys[sortKeyIndex]}排序：原始顺序）；
类表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
tableData:props.data，
sortKeyIndex:0，
};
这个。肮脏。捆绑（这个）；
}
sortBy（）{
const arrayCopy=[…this.props.data]；
const sortKeyIndex=（this.state.sortKeyIndex+1）%sortKeys.length；
排序（compareBy（sortKeys[sortKeyIndex]）；
此.setState（（）=>({
tableData:arrayCopy，
sortKeyIndex，
}));
}
render（）{
const{tableData，sortKeyIndex}=this.state；
返回(
身份证件
标题
优先
发行类型
%完整的
{tableData.map（rowData=>）}


this.sortBy（）}
/>
);
}
}
ReactDOM.render（，document.getElementById（'myApp'））；

@souravsahu这有帮助吗？如果解决了问题，则应将其标记为已解决。