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
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. –
@MayankShukla wahr, ich denke, ich habe es! –
Beispiel Beispiel: https://codesandbox.io/s/ko5yk719r, das ist was du willst? –