@Evtera

Почему не работает React компонент?

Здравствуйте. Начал изучать Реакт. Столкнулся с небольшой ошибкой. Нужно, чтобы при вводе данных в Input, менялся заголовок, который находится в другом компоненте, но этого не происходит. Не понимаю, почему так.

Здесь выводим заголовок
import React from "react";
import "./App.scss";
import Input from "../Input/Input.js";

class App extends React.Component {
  state = {
    title: "hello",
  };

  render() {
    return (
      <div className="container">
        <h1 className="title">{this.state.title}</h1>
        <Input />
      </div>
    );
  }
}

export default App;


здесь вводим Input

import React from "react";
import "./Input.scss";

class Input extends React.Component {
  handleInput = (event) => {
    this.setState({
      title: event.target.value,
    });
  
  };

  render() {
    return (
      <div className="fieldWrapper">
        <input onChange={this.handleInput} className="fieldWrapper__textArea"></input>
      </div>
    );
  }
}

export default Input;
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Обновляете стейт дочернего компонента вместо родительского.

Надо перенести метод handleInput в родительский компонент и передавать в дочерний:

<Input handleInput={this.handleInput} />

В дочернем, соответственно, доставать его не непосредственно из текущего экземпляра, а из props:

onChange={this.props.handleInput}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 12:04
1000 руб./в час
19 сент. 2020, в 11:59
20000 руб./за проект
19 сент. 2020, в 11:26
17500 руб./за проект