Блог

Главная - Вопросы по программированию - Функция Reactjs bind() для функции с двумя параметрами

Функция Reactjs bind() для функции с двумя параметрами

#reactjs

Вопрос:

Как вы знаете, привязка не рекомендуется для рендеринга. Вместо этого привязка добавляется в конструктор.

 class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(event){
    // your event handling logic
  }
 
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
      Click Me
      </button>
    );
  }
}

Но как насчет функции с двумя параметрами? Щелчок по кнопке(a, событие)

 class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(a, event){
    // your event handling logic
  }
 
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
      Click Me
      </button>
    );
  }
}

Я попытался использовать функцию со стрелкой, и она работает, но я не уверен, правильно ли это. Я ожидаю правильного решения.

 class Foo extends React.Component{
  constructor( props ){
    super( props );
  }
 
  handleClick(a, event){
    // your event handling logic
  }
 
  render(){
    return (
      <button type="button" 
      onClick={(e) => this.handleClick('1',e)}>
      Click Me
      </button>
    );
  }
}

Комментарии:

1. Функция стрелки, скорее всего, будет подходящим способом справиться с этим. onClick передает событие только его обработчику, поэтому, если вам нужны дополнительные пользовательские параметры, переданные вашему обработчику, вам понадобится промежуточная функция, подобная этой функции со стрелкой.

2. В основном это не связано с привязкой. Используя функцию со стрелкой, вы просто случайно потеряли требование для поиска функции this .

3. Каков наилучший способ? Преобразуйте саму функцию handleClick() в функцию со стрелкой, а затем просто вызовите ее в onClick? Или мой последний вариант более верен?

Ответ №1:

Вместо привязки и использования конструктора рекомендуется использовать свойства класса или написать современную реакцию с функциональными компонентами.

 class Foo extends React.Component{
  // Auto binded
  handleClick = (a, event) => {
  }
 
  ...
}

В вашем случае вы можете просто создать функцию высокого порядка:

 class Foo extends React.Component{
  // Auto binded
  genHandleClick = param => event => {
  }
 
  return <div onClick={this.genHandleClick(1)}/>
}

Комментарии:

1. … и onClick={?} — как вызвать функцию со стрелкой с параметрами в onClick?

2. Вы можете попробовать карри… См. Обновленный ответ

3. onClick={this.genHandleClick(1) — ошибка — ошибка типа: Не удается прочитать свойство «цель» неопределенного

4. Пожалуйста, просто сделайте пример песочницы вместо вставки ошибок в комментарии

5. Спасибо, я все еще новичок. Скажите, ваше решение-лучший вариант? Или ваше решение совпадает с моим последним кодом?

Метки: