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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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