[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
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
grom [751] 04 янв 2014, 22:38
FileZilla перетаскивание файлов статья
grom [710] 04 янв 2014, 22:38
Python Imaging Library (PIL) статья
grom [659] 04 янв 2014, 22:38
Python работа с MySQL статья
grom [638] 04 янв 2014, 22:38
React и ReactDOM статья
grom [534] 04 янв 2014, 22:38
CSS запрет переноса строк статья