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

Question

[N!crO]

Первый вариант:

class FormContainer extends Component {
  constructor() {
    super()
    this.state = {
      seo_title: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value })
  }
  
  render() {
    const { seo_title } = this.state
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    )
  }
}

Второй вариант:

class FormContainer extends Component {
  state = {
    seo_title: ''
  }

  handleChange = event => {
    this.setState({ [event.target.id]: event.target.value })
  }

  render() {
    const { seo_title } = this.state
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    )
  }
}

Comments

[Роман Александрович]

второй вариант считаю предпочтительнее.

[Алексей Немиро]

Третий вариант :-)
handleChange={this.handleChange.bind(this)}
Если обработчик часто используется, то первый вариант лучше.

Второй нарушает стилистику.

[Dartess]

Третий вариант не вариант, потому что функция пересоздаётся на каждый чих, а в первых двух - нет.

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

Второй самый понятный. Стрелочная функция сразу показывает, что контекст привязан и байнд не нужен. Плюс это синтаксис полей экземпляров класса, а значит, в прототипе лишний метод валяться не будет. Единственный минус - экспериментальный синтаксис, ещё не стандарт, но это не повод не использовать.

Answer 1

[Антон Спирин]

Второй вариант, негласный стандарт в React сообществе. Тут используется экспериментальный синтаксис babel-plugin-transform-class-properties.
Первый вариант предпочтительней, когда надо сделать наследование компонента, так как функции свойства класса не наследуются.

Answer 2

[Sergiu Mitu]

правильно и так и так, есть кстати ещё варианты (тоже правильные).