[2]
22 мая 2018, 21:15

React js onClick не передает значение методу

Нужно получить value события onClick. Но при клике в консоли вот что: 
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>);
    }
});

 

Комментарии (1)
jaga
22 мая 2018, 21:27
#

Используй функцию-стрелку:

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

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 1208]
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 1125]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 1085]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1082]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1073]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 991]
[119]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 984]