React js onClick não pode passar valor para o método

Eu quero ler as propriedades do valor do evento onClick. Mas quando clico nele, vejo algo assim no console:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

Meu código está funcionando corretamente. Quando corro, posso ver, {column}mas não consigo, no evento onClick.

Meu código:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

Como posso passar um valor para o onClickevento no React js?

Jeito fácil

Use uma função de seta:

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

Isso criará uma nova função que chama handleSortcom os parâmetros corretos.

Melhor maneira

Extraia-o em um subcomponente. O problema com o uso de uma função de seta na chamada de renderização é que ela criará uma nova função a cada vez, o que acaba causando renderizações desnecessárias.

Se você criar um subcomponente, poderá passar o manipulador e usar props como argumentos, que serão renderizados novamente somente quando os props mudarem (porque a referência do manipulador agora nunca muda):

Subcomponente

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

Componente principal

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

Maneira fácil antiga (ES5)

Use .bindpara passar o parâmetro que você deseja:

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

Há respostas legais aqui, e eu concordo com o Austin Greco (a segunda opção com componentes separados).
Há outra maneira que eu gosto, currying .
O que você pode fazer é criar uma função que aceite um parâmetro (seu parâmetro) e retornar outra função que aceite outro parâmetro (o evento click neste caso). então você é livre para fazer o que quiser.

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

E você o usará desta maneira:

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

Aqui está um exemplo completo desse uso:

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Observe que essa abordagem não resolve a criação de uma nova instância em cada renderização.
Eu gosto dessa abordagem em relação aos outros manipuladores embutidos, pois essa é mais concisa e legível na minha opinião.

Editar:
Conforme sugerido nos comentários abaixo, você pode armazenar em cache / memorizar o resultado da função.

Aqui está uma implementação ingênua:

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Atualmente, com o ES6, acho que poderíamos usar uma resposta atualizada.

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

Basicamente, (para quem não sabe), pois onClickespera uma função passada para ela, bindfunciona porque cria uma cópia de uma função. Em vez disso, podemos passar uma expressão de função de seta que simplesmente chama a função que queremos e preserva this. Você nunca precisará vincular o rendermétodo no React, mas se por algum motivo estiver perdendo thisem um dos métodos do componente:

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

[[h / t para @ E. Sundin por vincular isso em um comentário]

A resposta principal (funções anônimas ou ligação) funcionará, mas não é a que apresenta melhor desempenho, pois cria uma cópia do manipulador de eventos para todas as instâncias geradas pela map()função.

Esta é uma explicação da maneira ideal de fazê-lo a partir do ESLint-plugin-react :

Listas de itens

Um caso de uso comum de ligação na renderização é ao renderizar uma lista, para ter um retorno de chamada separado por item da lista:

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

Em vez de fazer dessa maneira, puxe a seção repetida para seu próprio componente:

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

Isso acelerará a renderização, pois evita a necessidade de criar novas funções (através de chamadas de ligação) em cada renderização.

Esta é a minha abordagem, não tenho certeza do quão ruim é, por favor, comente

No elemento clicável

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

e depois

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

este exemplo pode ser um pouco diferente do seu. mas posso garantir que esta é a melhor solução que você pode ter para esse problema. Pesquisei por dias uma solução que não apresentava problemas de desempenho. e finalmente veio com este.

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

ATUALIZAR

caso você queira lidar com objetos que deveriam ser os parâmetros. você pode usar JSON.stringify(object)para converter em string e adicionar ao conjunto de dados.

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

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

Mais uma opção que não envolve .bindou o ES6 é usar um componente filho com um manipulador para chamar o manipulador pai com os acessórios necessários. Aqui está um exemplo (e um link para o exemplo de trabalho está abaixo):

var HeaderRows = React.createClass({
  handleSort:  function(value) {
     console.log(value);
  },
  render: function () {
      var that = this;
      return(
          <tr>
              {this.props.defaultColumns.map(function (column) {
                  return (
                      <TableHeader value={column} onClick={that.handleSort} >
                        {column}
                      </TableHeader>
                  );
              })}
              {this.props.externalColumns.map(function (column) {
                  // Multi dimension array - 0 is column name
                  var externalColumnName = column[0];
                  return ( <th>{externalColumnName}</th>
                  );
              })}
          </tr>);
      )
  }
});

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

A idéia básica é que o componente pai passe a onClickfunção para um componente filho. O componente filho chama a onClickfunção e pode acessar qualquer um que seja propspassado para ela (e o event), permitindo que você use qualquer eventvalor ou outros acessórios na onClickfunção do pai .

Aqui está uma demonstração do CodePen mostrando esse método em ação.

Fazendo uma tentativa alternativa de responder à pergunta do OP, incluindo chamadas e.preventDefault ():

Link renderizado ( ES6 )

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

Função Componente

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

Sei que é muito tarde para a festa, mas acho que uma solução muito mais simples pode satisfazer muitos casos de uso:

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

    ...

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

Presumo que você também possa usar um data-atributo.

Simples, semântico.

Basta criar uma função como esta

  function methodName(params) {
    //the thing  you wanna do
  }

e chame no lugar que você precisa

<Icon onClick = {() => {methodName (theParamsYouwantToPass); }} />

Você pode simplesmente fazer isso se estiver usando 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>
     );
   }
 }

A implementação mostra a contagem total de um objeto passando a contagem como um parâmetro dos principais para os subcomponentes, conforme descrito abaixo.

Aqui está 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;

E aqui está 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>
    )
  }
};

Tente implementar acima e você obterá o cenário exato de como os parâmetros de passagem funcionam no reactjs em qualquer método DOM.

Escrevi um componente de invólucro que pode ser reutilizado para esse fim com base nas respostas aceitas aqui. Se tudo o que você precisa fazer é passar uma string, adicione um atributo de dados e leia-o em e.target.dataset (como alguns outros sugeriram). Por padrão, meu wrapper se liga a qualquer prop que é uma função e começa com 'on' e passa automaticamente a prop de dados de volta para o chamador, após todos os outros argumentos de evento. Embora eu não o tenha testado quanto ao desempenho, ele lhe dará a oportunidade de evitar a criação da classe e pode ser usado assim:

const DataButton = withData('button')
const DataInput = withData('input');

ou para componentes e funções

const DataInput = withData(SomeComponent);

ou se você preferir

const DataButton = withData(<button/>)

declarar que Fora do contêiner (próximo às importações)

Aqui está o uso em um contêiner:

import withData from './withData';
const DataInput = withData('input');

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}>
                            <DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
                        </div>
                    ))
                }
            </div>
        );
    }
}

Aqui está o código do wrapper 'withData.js:

import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) => {
    Target = React.isValidElement(Target) ? Target.type : Target;
    options = { ...defaultOptions, ...options }

    class WithData extends Component {
        constructor(props, context){
            super(props, context);
            this.handlers = getHandlers(options.events, this);        
        }

        render() {
            const { data, children, ...props } = this.props;
            return <Target {...props} {...this.handlers} >{children}</Target>;
        }

        static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
    }

    return WithData;
}

function getHandlers(events, thisContext) {
    if(!events)
        events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
    else if (typeof events === 'string')
        events = [events];

    return events.reduce((result, eventType) => {
        result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}

Tenho abaixo 3 sugestões para isso em JSX onClick Events -

1. Na verdade, não precisamos usar a função .bind () ou Arrow em nosso código. Você pode usar de maneira simples no seu código.

2. Você também pode mover o evento onClick de th (ou ul) para tr (ou li) para melhorar o desempenho. Basicamente, você terá n número de "Ouvintes de Eventos" para o seu elemento n li.

   So finally code will look like this:
   <ul onClick={this.onItemClick}>
       {this.props.items.map(item =>
              <li key={item.id} data-itemid={item.id}>
                  ...
              </li>
         )}
   </ul>

   // E você pode acessar item.idno onItemClickmétodo como mostrado abaixo:

   onItemClick = (event) => {
      console.log(e.target.getAttribute("item.id"));
   }

3. Concordo com a abordagem mencionada acima para criar o React Component separado para ListItem e List. Esse código fica bom, no entanto, se você tiver 1000 li, serão criados 1000 ouvintes de eventos. Certifique-se de que você não deve ter muitos ouvintes de eventos.

   import React from "react";
   import ListItem from "./ListItem";
   export default class List extends React.Component {
   
       /**
       * This List react component is generic component which take props as list of items and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = (item) => {
           if (this.props.onItemClick) {
               this.props.onItemClick(item);
           }
       }
   
       /**
       * render method will take list of items as a props and include ListItem component
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <div>
                 {this.props.items.map(item =>
                     <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>
                 )}
               </div>
           );
       }
   
   }
   
   
   import React from "react";
   
   export default class ListItem extends React.Component {
       /**
       * This List react component is generic component which take props as item and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = () => {
           if (this.props.item && this.props.onItemClick) {
               this.props.onItemClick(this.props.item);
           }
       }
       /**
       * render method will take item as a props and print in li
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>
           );
       }
   }

Adicionei código para o valor do evento onclick passar para o método de duas maneiras. 1 usando o método de ligação 2. usando o método de seta (=>). veja os métodos HandleSort1 e HandleSort

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

Abaixo está o exemplo que passa valor no evento onClick.

Eu usei a sintaxe es6. Lembre-se de que a função de seta do componente de classe não se liga automaticamente, portanto se liga explicitamente ao construtor.

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

Eu acho que você precisará vincular o método à instância da classe React. É mais seguro usar um construtor para vincular todos os métodos no React. No seu caso, quando você passa o parâmetro para o método, o primeiro parâmetro é usado para vincular o contexto 'this' do método, portanto, você não pode acessar o valor dentro do método.

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

Há uma maneira muito fácil.

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

class TableHeader extends Component {
  handleClick = (parameter,event) => {
console.log(parameter)
console.log(event)

  }

  render() {
    return (
      <button type="button" 
onClick={this.handleClick.bind(this,"dataOne")}>Send</button>
    );
  }
}

Saindo do nada para esta pergunta, mas acho que .bindvai fazer o truque. Encontre o código de exemplo abaixo.

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

Usando a função de seta:

Você deve instalar o estágio 2:

npm install babel-preset-stage-2:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

Existem três maneiras de lidar com isso: -

1. Vincule o método no construtor como: -

   export class HeaderRows extends Component {
      constructor() {
          super();
          this.handleSort = this.handleSort.bind(this);
      }
   }

2. Use a função de seta enquanto a cria como: -

   handleSort = () => {
       // some text here
   }

3. A terceira maneira é esta: -

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

Você pode usar seu código assim:

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

Aqui está e para o objeto de evento, se você deseja usar métodos de evento como preventDefault()na função de manipulação ou deseja obter o valor de destino ou nome como e.target.name.

Eu achei a solução de passar param como um atributo de tag bastante razoável.

No entanto, possui limitações:

• Não funciona corretamente quando o item da lista possui outras tags (portanto, event.target pode ser diferente do pretendido)
• Param poderia ser apenas uma sequência. Requer serialização e desserialização.

Por isso, criei esta biblioteca: react-event-param

Isto:

• Resolve o problema das crianças, procurando o atributo necessário nos pais sempre que necessário
• Serializa e desserializa automaticamente os parâmetros
• Encapsula a lógica de definir e obter. Não há necessidade de mexer com nomes de parâmetros

Exemplo de uso:

import { setEventParam, getEventParam } from "react-event-param";

class List extends Component {
  onItemClick = e => {
    const index = getEventParam(e.target);
    // Do something with index
  };

  render() {
    return (
      <ul>
        {this.props.items.map((itemText, index) => (
          <li
            key={index}
            {...setEventParam(index)}
            onClick={this.onItemClick}
          >
            {{ itemText }}
          </li>
        ))}
      </ul>
    );
  }
}

export default List;

Havia muitas considerações de desempenho, todas no vácuo.
O problema com esses manipuladores é que você precisa curry-los para incorporar o argumento que você não pode nomear nos adereços.
Isso significa que o componente precisa de um manipulador para cada elemento clicável. Vamos concordar que, para alguns botões, isso não é um problema, certo?
O problema surge quando você está manipulando dados tabulares com dezenas de colunas e milhares de linhas. Lá você percebe o impacto da criação de muitos manipuladores.

O fato é que eu só preciso de um.
Defino o manipulador no nível da tabela (ou UL ou OL ...) e, quando o clique ocorre, posso dizer qual foi a célula clicada usando os dados disponíveis desde o momento no objeto de evento:

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

Uso os campos tagname para verificar se o clique ocorreu em um elemento válido, por exemplo, ignore cliques em THs ou rodapés.
O rowIndex e cellIndex fornecem o local exato da célula clicada.
Textcontent é o texto da célula clicada.

Dessa forma, não preciso passar os dados da célula para o manipulador, ele pode fazer o autoatendimento.
Se eu precisar de mais dados, dados que não devem ser exibidos, posso usar o atributo do conjunto de dados ou elementos ocultos.
Com alguma navegação DOM simples, está tudo à mão.
Isso tem sido usado em HTML desde sempre, já que os PCs eram muito mais fáceis de entender.

Existem algumas maneiras de passar parâmetros nos manipuladores de eventos, alguns estão seguindo.

Você pode usar uma função de seta para contornar um manipulador de eventos e passar parâmetros:

<button onClick={() => this.handleClick(id)} />

O exemplo acima é equivalente a chamar .bindou você pode chamar explicitamente o bind.

<button onClick={this.handleClick.bind(this, id)} />

Além dessas duas abordagens, você também pode passar argumentos para uma função definida como uma função curry.

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

Use um fechamento , resultando em uma solução limpa:

<th onClick={this.handleSort(column)} >{column}</th>

A função handleSort retornará uma função que já tenha a coluna de valor definida.

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

A função anônima será chamada com o valor correto quando o usuário clicar no th.

Exemplo: https://stackblitz.com/edit/react-pass-parameters-example

Simples alteração é necessária:

Usar <th value={column} onClick={that.handleSort} >{column}</th>

ao invés de <th value={column} onClick={that.handleSort} >{column}</th>