Рендер отдельного компонента React

239

23 февраля 2018, 19:49

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

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

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

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

Answer 1

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

Суть в чем: вы храните значение 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"));