防止触发多个点击事件：ReactJS

Question

我有一种情况，我有多个在列标题上触发的点击事件。将有一个用于过滤器下拉的事件和另一个用于排序的事件。有一个过滤器图标 ，单击将显示哪些列过滤器选项。单击标题时，也应该进行排序。现在每当我点击过滤器图标时，两个处理程序都会被触发。有人可以帮我弄这个吗。单击过滤器图标时，只应触发过滤器处理程序帮助将不胜感激。沙盒：https : //codesandbox.io/s/relaxed-feather-xrpkp家长import * as React from "react";import { render } from "react-dom";import ReactTable from "react-table";import "./styles.css";import "react-table/react-table.css";import Child from "./Child";interface IState {  data: {}[];  columns: {}[];}interface IProps {}export default class App extends React.Component<IProps, IState> {  constructor(props: any) {    super(props);    this.state = {      data: [        { firstName: "Jack", status: "Submitted", age: "14" },        { firstName: "Simon", status: "Pending", age: "15" },        { firstName: "Pete", status: "Approved", age: "17" }      ],      columns: []    };  }  handleColumnFilter = (value: any) => {    console.log(value);  };  sortHandler = () => {    console.log("sort handler");  };  componentDidMount() {    let columns = [      {        Header: () => (          <div onClick={this.sortHandler}>            <div style={{ position: "absolute", marginLeft: "10px" }}>              <Child handleFilter={this.handleColumnFilter} />            </div>            <span>First Name</span>          </div>        ),        accessor: "firstName",        sortable: false,        show: true,        displayValue: " First Name"      },      {        Header: () => (          <div onClick={this.sortHandler}>            <span>Status</span>          </div>        ),        accessor: "status",        sortable: false      }    ];    this.setState({ columns });  }  render() {    const { data, columns } = this.state;    return (      <div>        <ReactTable          data={data}          columns={columns}          defaultPageSize={10}          className="-striped -highlight"        />      </div>    );  }}const rootElement = document.getElementById("root");render(<App />, rootElement);