Как передать параметры не используя стрелочную функцию в reactjs?

Question

[RomanSS]

Подскажите решение, есть компонент в нем есть функция, как ей правильно передавать параметры. Судя по документации такой вариант хоть и рабочий, но не верный, а все другие варианты которые видел в сети, они без передачи параметров. Не хотелось бы создавать много разных функций, которые выполняют почти идентичные действия.

class App extends React.Component {
  modal(name,e) {
  	console.log(name,e);
  }

 render() {
	return (
		<button onClick={() => this.modal('auth','show')}>Войти</button>
    )
  }
}

Answer 1

[Максим]

Передавать параметры в функции, можно с помощью bind (при этом создается новая функция, что может сказаться на производительности, но я с проблемами не сталкивался).

Выглядеть это может так:

...
onChangePeriodClick(period) {
  console.log(period)
}
...
<button onClick={this.onChangePeriodClick.bind(this, 'Hours')} /> Hours </button>
...

Comments

[RomanSS]

Спасибо, за ответ, но этот вариант не годится. Есть ли еще какие-то варианты?

[Алексей Зуев]

RomanSS: А можно узнать, где в документации написано, что вариант с arrow function неверный?

[Алексей Зуев]

RomanSS: и чем вам этот вариант не годится?

[RomanSS]

Алексей Зуев: https://facebook.github.io/react/docs/handling-eve... в самом низу "The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor to avoid this sort of performance problem."

[Алексей Зуев]

RomanSS: можете передать параметры через data-атрибуты, в modal получить их через e.target. Если нужно хранить this, то еще и bind в конструктор добавьте, как гласит документация

[RomanSS]

Алексей Зуев: как вариант) Но есть ли способ, который рекомендуется использовать

[Aves]

RomanSS:

class App extends React.Component {
// ES2015
  constructor() {
    this.onClick = this.modal.bind(this, 'auth', 'show');
  }
// ES.Next
  onClick = () => this.modal('auth', 'show');
  modal(name,e) {
  	console.log(name,e);
  }

 render() {
  return (
    <button onClick={this.onClick}>Войти</button>
  )
  }
}

[RomanSS]

Aves: Думаю это подойдет, спасибо! Можно вынести как отдельный ответ, отмечу как решение, чтоб другие видели.