React - функция Arrow против bind () и событие с аргументом

Question

Я новичок в реакции (даже в JS).Я сделал следующий код в моем App классе:

nameChangeHandler = (event, personId) => {
//method code
};

render()
{
  <div>
    {this.state.persons.map((person, index) => {
      return <Person
          // nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
          nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}
      />
    })}
  </div>
}

Я передаю nameChangeHandler компоненту Person, где я вызываю его в событии onChange в теге input (<input type="text" onChange={props.nameChangeHandler}/>)

Приложение работает нормально, когда я передаю его таким образом:
nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
, но это не так, когда я делаю это так:
nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}

Не удается выполнить исключение, когда я пытаюсь получить доступ к event.target.value в методе nameChangeHandler.

Как передать событие и аргумент этому методу, используя метод bind() вместо функции стрелки?

Я слышал, что мы всегда должны использовать bind() подход к функции стрелки, потому что подход функции стрелки может визуализировать компонент много раз.

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

Answer 1

Это вопрос времени.

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

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

Ваша функция ожидает, что event будет first аргумент, поэтому, когда вы используете стрелку, которую вы используете, вы передаете event, person.id.Однако, когда вы связываете, вы передаете person.id (первый аргумент), а когда функция вызывается с event, вы передаете это (как второй аргумент).

Это означает, что ваши аргументы в конечном итоге окажутся неправильнымиоколо.

Так как у вас только есть person.id, когда вы звоните bind, и вы не получите event до позднего времени, единственный способ использовать для этого bind изменить исходную функцию , чтобы она принимала аргументы в другом порядке.

nameChangeHandler = (personId, event) => {