防止触发多个点击事件：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);