2017-12-15 20 views
-1

Ich bin in der Lage, den Filter funktioniert, aber einfach den Filter von es6 verwenden, aber dann ist das Problem, ich weiß nicht, wie Sie den Zustand zurück auf die ursprüngliche Quelle.Make Tabelle mit Filter in reagieren fehlgeschlagen

Normalerweise ist die Datenquelle eine API-Aufrufe, aber es ist möglich, api Anruf zu vermeiden, wenn der Benutzer den Wert aus dem Filter-Eingang gelöscht?

const data = [ 
    { 
    Id: "1", 
    FirstName: "Luke", 
    LastName: "Skywalker" 
    }, 
    { 
    Id: "2", 
    FirstName: "Darth", 
    LastName: "Vader" 
    }, 
    { 
    Id: "3", 
    FirstName: "Leia", 
    LastName: "Organa" 
    }, 
    { 
    Id: "4", 
    FirstName: "Owen", 
    LastName: "Lars" 
    } 
]; 


class App extends React.Component { 

    constructor() { 
    super() 
    this.state = { 
     data: data 
    } 
    } 

    filterId(e) { 
    const Id = e.target.value 
    if (Id) { 
     this.setState({ 
     data: this.state.data.filter(v => v.Id === Id), 
     }) 
    } else { 
     this.setState({ 
     data 
     }) 
    } 
    } 

    render() { 
    return (
     <div style={styles}> 
     <table> 
      <th>Id <input type="number" onChange={e => this.filterId(e)} /></th> 
      <th>Name<input /></th> 
      {this.state.data.map((o, i) => { 
      return (
       <tr> 
       <td>{o.Id}</td> 
       <td>{o.FirstName}</td> 
       </tr> 
      ) 
      })} 
     </table> 
     </div> 
    ); 
    } 
} 

https://codesandbox.io/s/oo22451v25

+0

eine Option ist, speichern Sie die gleichen Daten zweimal (originalData, filteredData) Anfangswert von beiden gleich sein wird und Filter immer die Daten von originalData und Aktualisierung in filteredData. –

+0

@MayankShukla wahr, ich denke, ich habe es! –

+0

Beispiel Beispiel: https://codesandbox.io/s/ko5yk719r, das ist was du willst? –

Antwort

0

Sie können entweder Speicher gefilterten Daten in getrennten Variablen oder Daten zu tun Filterung dynamisch in render Funktion, wie this.state.data.filter(v => v.Id === this.state.Id).map(...).

+0

@JennyMok könnten Sie bitte erklären? –

0

Es gibt mehrere Dinge, die Sie tun könnten, aber ich würde Ihnen raten, die im Zustand gespeicherten Originaldaten nicht zu ändern, sondern eine neue Zustandseigenschaft hinzuzufügen, die die Daten enthält, wenn die Originaldaten gefiltert werden.

Sie könnten dann dieses neue Zustandsobjekt einer Variablen zuweisen und es auf diese Weise ausgeben.

Es könnte dann wie folgt aussehen somethiing:

const data = [ 
    { 
    id: '1', 
    firstName: 'Luke', 
    LastName: 'Skywalker', 
    }, 
    { 
    id: '2', 
    firstName: 'Darth', 
    LastName: 'Vader', 
    }, 
    { 
    id: '3', 
    firstName: 'Leia', 
    LastName: 'Organa', 
    }, 
    { 
    id: '4', 
    firstName: 'Owen', 
    LastName: 'Lars', 
    }, 
]; 

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: data, 
     filteredData: null, 
    }; 

    this.filterId = this.filterId.bind(this); 
    } 

    filterId(e) { 
    const id = e.target.value; 
    if (id) { 
     this.setState({ 
     filteredData: this.state.data.filter(v => v.id === id), 
     }); 
    } else { 
     this.setState({ 
     filteredData: null, 
     }); 
    } 
    } 

    render() { 
    const dataOutput = this.state.filteredData || this.state.data; 
    return (
     <div> 
     <table> 
      <th> 
      id <input type="number" onChange={e => this.filterId(e)} /> 
      </th> 
      <th> 
      Name<input /> 
      </th> 
      {dataOutput.map((o, i) => { 
      return (
       <tr key={o.id}> 
       <td>{o.id}</td> 
       <td>{o.firstName}</td> 
       </tr> 
      ); 
      })} 
     </table> 
     </div> 
    ); 
    } 
} 

Oh, und noch eine Sache: Verwenden Sie Camelcase. Großbuchstaben am Anfang sollten nur bei der Deklaration von Klassen verwendet werden.

+0

Bitte testen Sie Ihre Antwort, bevor Sie einen ungültigen Code eingeben. –

+0

Sry, ich hatte die Styles-Variable in meiner Komponente, aber vergessen, sie hier zu kopieren. Ich habe den Stil entfernt und es funktioniert jetzt wie ein Zauber. –

0

Zuerst up: Sie werden mit includes() für Benutzerfreundlichkeit filtern wollen. Ansonsten stimmen die Dinge erst überein, wenn sie zu 100% identisch sind. Dies wird von Bedeutung sein, sobald Sie mit Feldern arbeiten, die länger als eine Ziffer sind.

Zweitens: Filtration über die Methode können Sie robuster suchen, dh können Sie die Rücktaste zu ungefilter, wie this.state.data wird unberührt bleiben.

Siehe unten für ein praktisches Beispiel.

// Data. 
 
const data = [ 
 
    { 
 
    Id: "1", 
 
    FirstName: "Luke", 
 
    LastName: "Skywalker" 
 
    }, 
 
    { 
 
    Id: "2", 
 
    FirstName: "Darth", 
 
    LastName: "Vader" 
 
    }, 
 
    { 
 
    Id: "3", 
 
    FirstName: "Leia", 
 
    LastName: "Organa" 
 
    }, 
 
    { 
 
    Id: "4", 
 
    FirstName: "Owen", 
 
    LastName: "Lars" 
 
    } 
 
] 
 

 
// Filter. 
 
class Filter extends React.Component { 
 

 
    // Constructor. 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = {data, query: ''} 
 
    } 
 

 
    // Render. 
 
    render() { 
 
    return (
 
     <div> 
 
     <table> 
 

 
      <tr> 
 
      <input placeholder="Query" type="number" value={this.state.query} onChange={event => this.setState({query: event.target.value})} /> 
 
      </tr> 
 

 
      <th>Id</th> 
 
      <th>Name</th> 
 

 
      {this.state.data.filter((point) => point.Id.includes(this.state.query)).map((o, i) => { 
 
      return (
 
       <tr> 
 
       <td>{o.Id}</td> 
 
       <td>{o.FirstName}</td> 
 
       </tr> 
 
      ) 
 
      })} 
 

 
     </table> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Filter/>, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

+0

das ist ziemlich coole Lösung! –

+0

aber wenn es viele Felder hat, wird es schwer zu lesen sein –

+0

Sie können Anweisungen '||' zum 'filter()' hinzufügen, um nach anderen Übereinstimmungen zu suchen –

Verwandte Themen