Как правильно сделать на React?

Question

[KOPC1886]

Всем привет!!

class Test extends React.Component
{
  construcrot(props)
  {
    super(props);
    this.handleClick = (value) => this.handleClick.bind(this, value)
  }
  
  handleClick(object) {
    
  }
  
  render() {
    const objectTest = {
      id: 1,
      name: 'Test-1'
    }
  };
  }
    return (
      <div>
        <input type="button" onClick={this.handleClick(objectTest)}>
      </div>
    );
  }
}

Как правильно биндить метод, если в него надо передать аргумент?
Правильно ли я реализовал?

Comments

[copal]

лучше

<input type="button" onClick={ event => this.handleClick(objectTest) }>

[KOPC1886]

copal: а event это что? откуда? это ведь получается стрелочная функция , верно?

[copal]

KOPC1886: да это event и он присутствует у всех слушателей, коем является onClick, хотите Вы этого или нет.

[KOPC1886]

copal: я написал () => this.handleClick(objectTest) и тоже работает. В чем разница ?

Answer 1

[Евгений]

Так:

return (
    <input type="button" onClick={ this.handleClick.bind(this, objectTest) } />
);

Вот пример:
https://jsfiddle.net/t3z1Lz83/1/

Comments

[KOPC1886]

Евгений но тогда при каждом рендере будет bind . А это не очень хорошо для производительности.

[Евгений]

У вас там пару биндов, а вы говорите про производительность?) Рендером можно управлять через жизненные циклы компонента, т.е. не всегда рендерить. Да и к тому же если проект только начался, про оптимизацию можно не особо заморачиваться - пока не появятся явные проблемы.

[Евгений]

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

[Евгений]

KOPC1886: Вот пример через стрелочную функцию: https://jsfiddle.net/t3z1Lz83/2/

[KOPC1886]

Евгений: Спасибо!) Но через стрелочную функцию ведь лучше же? В чем разница вообще?

[Евгений]

KOPC1886: Одинаково, стрелочная функция нативно не везде поддерживается - поэтому через babel она все равно транспилится в обычную функцию, но уже на конце будет .bind(this), поэтому в конечном счете это 1 и то же

Answer 2

[Mikhail Osher]

Этого должно быть достаточно.

this.handleClick = this.handleClick.bind(this)

Comments

[KOPC1886]

Mikhail Osher так а как объект передать в метод?

Answer 3

[theWaR_13]

Проще было бы сделать вообще вот так:

class Test extends React.Component
{ 
  handleClick = object => {
    
  }
  
  render() {
    const objectTest = {
      id: 1,
      name: 'Test-1'
    }
  };
  }
    return (
      <div>
        <input type="button" onClick={this.handleClick(objectTest)}>
      </div>
    );
  }
}

Comments

[KOPC1886]

theWaR_13 Но тогда в методе handleClick нельзя будет вызвать this.setState(), так как там this нет.

[theWaR_13]

KOPC1886: а вы считаете, что этоbest practices - менять стейт прямо в методе onClick?

[KOPC1886]

theWaR_13 Нет конечно, но биндить можно ведь и в конструкторе. Я вот и хочу узнать, как более правильно.

[theWaR_13]

KOPC1886: так в том и суть, что можно вообще не биндить, используя стрелочные функции. И этот метод является нормальным.

[KOPC1886]

theWaR_13: я как раз и сделал через стрелочную функцию. Так ведь лучше же? и this доступен в методе.

[theWaR_13]

KOPC1886: прочитайте подробнее про ES6 в целом и стрелочные функции в частности. Их область видимости совпадает с тем местом, где они объявлены. В моем примере функция handleClick() объявлена внутри компонента, соответственно this будет указывать на компонент, соответственно биндить ничего не нужно.