TypeError: Cannot read property 'bind' of undefined в React.js, как исправить?

Question

[StepanSnigur]

Здравствуйте,
при запуске приложения возникает ошибка: TypeError: Cannot read property 'bind' of undefined
браузер ругается на строку: this.NewTask = this.NewTask.bind(this);
вот мой код:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Вот код класса Button:

import React, { Component } from 'react';
import styled from 'styled-components';

class Button extends React.Component {
    render () {
        return (
            <StyledButton>{this.props.text}</StyledButton>
        );
    }
}
export default Button;

Я новичок в реакте и впервые столкнулся с такой ошибкой. Буду крайне признателен, если вы поможете

Comments

[StepanSnigur]

ошибка исчезла, но функция не вызывается, можете, пожалуйста объяснить, почему?
вот код:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 
    NewTask () {
        alert(1)
    }
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Answer 1

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

В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

Comments

[StepanSnigur]

я просто решил не включать styled components в вопрос, чтобы не загромождать код

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

StepanSnigur, ну тогда вам стоило об этом написать.
Методы в JavaScript принято называть в camelCase. Замените NewTask на newTask, а еще лучше на addTask.
Ну и сам метод не забудьте реализовать.

[StepanSnigur]

Антон Спирин, сделал вот так:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';


const Wrapper = styled.section`
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
`
const HeaderWrapper = styled.header`
    background: #9DB1CC;
`
const TasksWrapper = styled.div`
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;

    &:last-child {
        margin-bottom: 50px;
    }
`

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.addTask = this.addTask.bind(this);
    }
    addTask () {
        alert('1')
    }
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.addTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

но функция не вызывается

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

StepanSnigur, в компоненте Button в StylesButton onClick не пробрасываете. Обновил ответ. И настройте отступ в IDE на два пробела вместо четырех. Это стандарт в современной JS разработке.

[StepanSnigur]

Антон Спирин, огромное спасибо, все заработало

Answer 2

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

NewTask это функция которая у вас не реализована. или удалите this.NewTask = this.NewTask.bind(this); или

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 

NewTask(){

}
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Comments

[StepanSnigur]

просто не захватил этот участок)