@PlasterTom

Почему код именно такой?

Просматриваю урок по реакту, там есть такой пример с созданием приложения для заметок. В коде описаны компоненты Note, NoteEditor, NotesGrid и собственно все это вместе NotesApp. Мне не очень понятен код функции handleNoteAdd. А именно, почему она описана и в одном и в другом компоненте. Почему нельзя было ее описать только в одном месте? Почему есть строка this.props.onNoteAdd(newNote); а не this.props.handleNoteAdd(newNote)?

class NoteEditor extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            text: ''
        }
            
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleNoteAdd = this.handleNoteAdd.bind(this);
    }
    
    handleTextChange (event){
        this.setState({
            text: event.target.value
        })
    }
    
    handleNoteAdd() {
        let newNote = {
            text: this.state.text,
            color: 'yellow',
            id: Date.now()
        }
        
        this.props.onNoteAdd(newNote);
        this.setState({text: ''});
    }
    
    render() {
    return(
    <div className="note-editor">
        <textarea placeholder="Enter your text here..." 
                  className="textarea" 
                  rows={2}
                  value={this.state.text}
                  onChange={this.handleTextChange}/>
        <button className="add-button" onClick={this.handleNoteAdd}>Add</button>
        
    </div>
    )
}
}


export default class NotesApp extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            notes: [ тут массив заметок]
        }
        
        this.handleNoteAdd=this.handleNoteAdd.bind(this);
    }
    
    handleNoteAdd (newNote) {
        let newNotes = this.state.notes.slice();
        newNotes.unshift(newNote)
        this.setState ({
            notes: newNotes
        })
    }
    render() {
    return(
    <div className="notes-app" style={{textAlign: "center"}}>
    NotesApp
    <NoteEditor onNoteAdd={this.handleNoteAdd}/>
    <NotesGrid notes = {this.state.notes}/>
    </div>
    )
}
}


5a858a7b2fd3d805357046.jpeg
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
little front
Почему есть строка this.props.onNoteAdd(newNote); а не this.props.handleNoteAdd(newNote)?


Сначала про это. Посмотри на вызов этого компонента.
<NoteEditor onNoteAdd={this.handleNoteAdd}/> -- эта строчка передаёт пропс с именем onNoteAdd , который вызывает функцию this.handleNoteAdd . Поэтому в компонент приходит пропс с названием onNoteAdd Всё. Можешь переименовать, если хочешь.

Почему дублируется функция? Она не дублируется.
- Функция во вложенном компоненте "собирает" заметку. Ну, читает id, цвет, создаёт объект с этими параметрами и передаёт в функцию родителя. Собирать заметку лучше именно во вложенном компоненте, ибо текст заметки хранится в его стейте.
- Функция в родителе просто пушит новую заметку в массив уже созданных
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
ЭЛКОД Москва
от 120 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.
19 авг. 2018, в 12:12
40000 руб./в месяц
19 авг. 2018, в 11:19
5000 руб./за проект
19 авг. 2018, в 10:09
1000 руб./за проект