@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;

Я новичок в реакте и впервые столкнулся с такой ошибкой. Буду крайне признателен, если вы поможете
  • Вопрос задан
  • 111 просмотров
Решения вопроса 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;
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Indacoin Москва
от 80 000 до 160 000 руб.
Acme Crypto Corp Нижний Новгород
от 120 000 до 200 000 руб.