0

Постараюсь правильно описать вопрос.

Есть родительский компонет в котором два дочерних.

export default class App extends Component {
  render() {
    return <div>
      <Search /> // компоненn для поиска который содержит только input и кнопку НАЙТИ
      <Main /> // компонет данных корорые должны отрисовываться по поиску
    </div>
  }
}

Как сделать чтобы при нажатии на кнопку НАЙТИ перерисовывался (рендерился) только компонент , чтобы текст (value) из инпута компонента Search не пропадал и соответственно компонет не мигал при рендеринге?

1 ответ 1

2

Можно сделать так: пример

Суть в чем: вы храните значение input в родительском компоненте в state. При изменении значения меняете state. При нажатии на кнопку, так же в родительском компоненте получаете список отфильтрованных элементов и их уже пробрасываете в компонент Main

index.js

import React from "react";
import { render } from "react-dom";

import Main from "./Main";
import Search from "./Search";

class App extends React.Component {
  state = {
    search: "",
    result: []
  };

  handleChangeSearch = ({ target }) => {
    this.setState({
      search: target.search
    });
  };

  handleSearch = () => {
    this.setState({
      result: [
        { id: 1, name: "Результат 1" },
        { id: 2, name: "Результат 2" },
        { id: 3, name: "Результат 3" },
        { id: 4, name: "Результат 4" },
        { id: 5, name: "Результат 5" }
      ]
    });
  };

  render() {
    const { search, result } = this.state;
    return (
      <div>
        <Search
          value={search}
          onChange={this.handleChangeSearch}
          onSubmit={this.handleSearch}
        />
        <Main items={result} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
1
  • Спасибо! Очень помогли.
    – Nick
    23 фев 2018 в 16:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.