我会这样做：

const HeaderRows = props => {
    const handleSort = value => () => {

    }

    return <tr>
        {props.defaultColumns.map((column, i) =>
            <th key={i} onClick={handleSort(column)}>{column}</th>)}
        {props.externalColumns.map((column, i) => {
            // Multi dimension array - 0 is column name
            const externalColumnName = column[0]
            return (<th key={i}>{externalColumnName}</th>)
        })}
    </tr>
}

有很多性能方面的考虑，都是在真空中。这个处理程序的问题是，您需要讨好它们，以便将无法在props中命名的参数合并进来。这意味着组件需要每个可单击元素的处理程序。让我们同意，对于几个按钮来说，这不是问题，对吧？当您处理具有数十列和数千行的表格数据时，就会出现问题。在这里，您会注意到创建这么多处理程序的影响。

事实是，我只需要一个。我将处理程序设置在表级别（或UL或OL…），当单击发生时，我可以使用事件对象中的可用数据来判断单击的单元格：

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

我使用标记名字段检查单击是否发生在有效元素中，例如忽略页脚中的单击。rowIndex和cellIndex提供了所单击单元格的确切位置。Textcontent是单击单元格的文本。

这样，我不需要将单元格的数据传递给处理程序，它可以自助处理。如果我需要更多的数据，不需要显示的数据，我可以使用dataset属性或隐藏元素。通过一些简单的DOM导航，一切都在手边。自从PC更容易陷入困境以来，HTML中就一直使用这种方式。

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

在可单击元素中

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

然后

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

如果您正在使用ES6，您可以简单地执行此操作。

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

我会这样做：

const HeaderRows = props => {
    const handleSort = value => () => {

    }

    return <tr>
        {props.defaultColumns.map((column, i) =>
            <th key={i} onClick={handleSort(column)}>{column}</th>)}
        {props.externalColumns.map((column, i) => {
            // Multi dimension array - 0 is column name
            const externalColumnName = column[0]
            return (<th key={i}>{externalColumnName}</th>)
        })}
    </tr>
}

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