@StepanSnigur

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

Здравствуйте,
при запуске приложения возникает ошибка: 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;

Я новичок в реакте и впервые столкнулся с такой ошибкой. Буду крайне признателен, если вы поможете
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:
class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Reatc js, React Native, Redux
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;
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Ultimate Guitar Калининград
от 1 000 до 5 000 usd.
Spar-online Нижний Новгород
от 150 000 до 170 000 руб.
ManyChat Москва
от 140 000 руб.
20 янв. 2019, в 13:50
15000 руб./за проект
20 янв. 2019, в 09:57
10000 руб./за проект
20 янв. 2019, в 07:18
15000 руб./за проект