@PlasterTom

Как будет с ES6?

Ворпос по этому коду. Как записать в onDelete = this.props.onNoteDelete через ES6 да так, чтобы контекст не потерялся?
render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Можно так:
В компоненте в из которого передаете хандлер определяете его как inline arrow class function:
class Parent {
  onNoteDelete = note => {
    // some stuff
  };
}

Такие функции не теряют контекст. Либо, можно забиндить хандлер в конструкторе, как посоветовали выше.

Метод render:
render() {
  const { notes, onNoteDelete } = this.props; 
  
  return(
    <div className="notes-grid" ref="grid">
      {notes.map(note => (
        <Note 
          key={note.id} 
          color={note.color}
          onDelete={() => onNoteDelete(note)}
        >
          {note.text} 
        </Note>
       ))}
    </div>
  )
}


Для значений которые не переопределяются лучше использовать const, а не let. Так другие программисты будут сразу видеть, что значение не переопределяется и как следствие ваш код будет читаемей.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={()=>onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }


или

constructor(props){
super(props)
this.onNoteDelete=this.onNoteDelete.bind(this)
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
ЭЛКОД Москва
от 120 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.
16 авг. 2018, в 20:57
2500 руб./за проект
16 авг. 2018, в 19:25
5000 руб./за проект
16 авг. 2018, в 17:28
25000 руб./за проект