通过将count作为参数从主组件传递到子组件，实现显示对象的总计数，如下所述。

这里是MainComponent.js

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      <div className="App">
        {someData.map((nameAndCount, i) => {
          return (
            <SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            />
          );
        })}
        <h1>Total Count: {this.state.total}</h1>
      </div>
    );
  }
}

export default App;

这里是SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      <div>
        <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
      </div>
    )
  }
};

尝试实现上述内容，您将得到传递参数如何在任何DOM方法上的reactjs中工作的确切场景。

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

1. You just have to use an arrow function in the Onclick event like this: 

<th value={column} onClick={() => that.handleSort(theValue)} >{column}</th>

2.Then bind this in the constructor method:
    this.handleSort = this.handleSort.bind(this);

3.And finally get the value in the function:
  handleSort(theValue){
     console.log(theValue);
}

我意识到这已经很晚了，但我认为一个更简单的解决方案可以满足许多用例：

    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    <button
        value={post.id}
        onClick={this.handleEdit} >Edit</button>

我想你也可以使用数据属性。

简单、语义。

这是我的方法，不知道有多糟糕，请评论

在可单击元素中

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

然后

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

使用封口，可获得干净的解决方案：

<th on单击=｛this.handleSort（column）｝>｛column｝</th>

handleSort函数将返回已设置值列的函数。

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

当用户单击th时，将使用正确的值调用匿名函数。

例子：https://stackblitz.com/edit/react-pass-parameters-example