SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", targetКод верный. Когда запускаю, вижу {column} но не получить событие onClick.
Код:
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>);
}
});
Используй функцию-стрелку:
return ( <th value={column} onClick={() => this.handleSort(column)}>{column}</th> );Это создаст новую функцию, которая вызывает handleSort с правильными параметрами.
А лучше всего так:
Извлеки его в sub-компонент. Проблема с использованием функции стрелок в вызове рендеринга заключается в том, что каждый раз будет создаваться новая функция, которая в конечном итоге вызывает ненужные ре-рендеры.
Если ты создаешь подкомпонент, можно передать обработчик и использовать props в качестве аргументов, которые затем будут повторно отображаться только тогда, когда prop изменится (поскольку ссылка обработчика теперь никогда не изменяется):
Sub-компонент:
class TableHeader extends Component { handleClick = () => { this.props.onHeaderClick(this.props.value); } render() { return ( <th onClick={this.handleClick}> {this.props.column} </th> ); } }Основной компонент:
{this.props.defaultColumns.map((column) => ( <TableHeader value={column} onHeaderClick={this.handleSort} /> ))}