Beste Weg, um die filter-Tabelle in Reagieren

Gebäude Zustand basierend auf Requisiten, kann etwas kompliziert sein, das ist akzeptabel, aber Sie sollten prüfen, alle Ihre Möglichkeiten.

Am einfachsten zu implementieren ist es zu filtern, die Requisiten, die in Ihrem render Methode. Wenn Sie klein genug sind Komponenten, die nicht aktualisiert zu viele Gründe, und vor allem, wenn die Anzahl der Elemente in der Liste sehr niedrig ist, könnte dies die bevorzugte Methode:

class FilterList extends React.Component {
  render () {
    const { elements } = this.props;
    const { filterStr } = this.state;

    const filteredElements = elements
      .filter(e => e.includes(filterStr))
      .map(e => <li>{ e }</li>)

    return (
      <div>
        <input
          type="text"
          value={ filterStr }
          onChange={ e => this.setState({ filterStr: e.target.value }) } />
        <ul>
          { filteredElements }
        </ul>
      </div>
    );
  }
}

Die nächste Möglichkeit ist, das zu tun, was du beschreibst, und daraus eine berechnete Zustand der Komponente, die den filter-Zustand und Requisiten übergeben. Das ist gut, wenn Sie haben eine komplizierte Komponente, die erhält viele Requisiten und gerendert wird oft. Hier bist du Zwischenspeicherung der sichtbaren Elemente und nur das filtern der Liste, wenn es muss gefiltert werden.

class FilterList extends React.Component {
  constructor (props) {
    this.state = {
      viewableEls: props.elements
    }
  }

  componentWillReceiveProps (nextProps) {
    const { elements } = this.props;
    const { filterStr } = this.state;

    if (elements !== nextProps.elements) {
      this.setState({
        viewableEls: this.getViewableEls(nextProps.elements, filterStr)
      })
    }
  }

  getViewableEls (elements, filterStr) {
    return elements.filter(el => el.includes(filterStr))
  }

  handleFilterChange = e => {
    const { elements } = this.props;

    this.setState({
      filterStr: e.target.value,
      viewableEls: this.getViewableEls(elements, filterStr)
    })
  }
  render () {
    const { viewableEls } = this.state;

    return (
      <div>
        <input
          type="text"
          value={ filterStr }
          onChange={ this.handleFilterChange } />
        <ul>
          { viewableEls.map(e => <li key={ e }>{ e }</li>) }
        </ul>
      </div>
    );
  }
}

Und schließlich die redux 'Weg', die erfordert, dass Sie passieren die Aktion Schöpfer und filterStr als Requisiten um die Komponente, wahrscheinlich, übergeben in der via connect woanders. Die Umsetzung ist unten mit einer stateless Komponente, da wir nicht halten die fitlerStr im Bauteil Zustand.

const FilterTable = ({ elements, filterStr, changeFilterStr }) => {
  return (
    <div>
      <input
        type="text"
        value={ filterStr }
        onChange={ e => changeFilterStr(e.target.value) } />
      <ul>
        {
          elements
            .filter(e => e.includes(filterStr))
            .map(e => <li key={ e }>{ e }</li>)
        }
      </ul>
    </div>
  )
}