Reagieren-Redux - Erstellen Sie einen Such-Filter
ich brauche Hilfe, um eine Suche, Filter in meiner app. Sein eine einfache app, die für die Studie verwendet Zwecke.
Ziel ist die Schaffung einer Suche filtern. ich habe die Zustand in search_bar container und ich denke, ich brauche, um es zu übergeben, die als Requisiten, um meine work_list container. aber ich weiß nicht, wie das zu tun. aus dieser phase-i-wird es etwas wie dieses.
work_list.js
renderWork() {
let filteredWorks = this.props.works.filter((work) => {
return work.title.indexOf(this.state.init) !== -1;
}
);
return filteredWorks.map((work) => {
return (
<tr>
<td>{work.title}</td>
</tr>
);
});
}
Ich weiß nicht, ob die Logik richtig ist. Brauche Hilfe.
app.js
import React, { Component } from 'react';
import SearchBar from '../containers/search_bar';
import WorkList from '../containers/work_list.js';
export default class App extends Component {
render() {
return (
<div>
<SearchBar/>
<WorkList/>
</div>
);
}
}
search_bar.js
import React, { Component } from 'react';
export default class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { init: '' };
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
this.setState({ init: event.target.value });
}
onFormSubmit(event) {
event.preventDefault();
}
render() {
return (
<form
onSubmit={this.onFormSubmit}
className="input-group">
<input
className="form-control"
placeholder = "Procurar Trabalho"
onChange={this.onInputChange}
value={this.state.init} />
<span className="input-group-btn">
<button type="submit" className="btn btn-secondary">Pesquisar</button>
</span>
</form>
);
}
}
work_list.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWork } from '../actions/index';
class WorkList extends Component {
renderWork() {
return this.props.works.map((work) => {
return (
<tr>
<td>{work.title}</td>
</tr>
);
});
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>Nome</th>
</tr>
</thead>
<tbody>
{this.renderWork() }
</tbody>
</table>
);
}
}
function mapStateToProps(state) {
return {
works: state.works
}
}
export default connect(mapStateToProps)(WorkList);
Meine Reduzierstücke
reducer_work.js
export default function () {
return [
{ title: 'Mirististica' },
{ title: 'Vet' }
];
}
index.js
import { combineReducers } from 'redux';
import MostrarTrabalhos from './reducer_work';
const rootReducer = combineReducers({
works : MostrarTrabalhos
});
export default rootReducer;
Danke !
Bitte Bearbeiten Ihre Frage zu klären, was Sie gefragt haben.
Im neu zu Reagieren Und Redux, manchmal ist dificult, um die Fragen...Danke für die Hinweise. Ich werde versuchen zu formulieren.
Im neu zu Reagieren Und Redux, manchmal ist dificult, um die Fragen...Danke für die Hinweise. Ich werde versuchen zu formulieren.
InformationsquelleAutor Hugo Seleiro | 2016-10-31
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sieht es aus wie dein code ist, fehlen einige wichtige Elemente, für die Redux zu arbeiten. Sie müssen, versenden Sie ein Redux-action, wenn Sie Ihre Sucheingabe änderungen, die wiederum in das update laden. Jetzt bist du lediglich der lokale Zustand der
SearchBar
wenn sich der Eingang ändert. Zweitens, Ihr reducer nicht den Status zu ändern, es ist immer die Rückgabe der gleichen array.Etwas entlang diesen Linien.
Ihre Aktionen Datei könnte wie folgt Aussehen:
Dann Ihre reducer könnte wie folgt Aussehen:
Dann in Ihre
SearchBar
:Ihre
WorkList
Komponente muß Sie nur zu hören für änderungenworks
in der Redux-Shop.<tbody>{funktioniert.Karte((Arbeit) => <tr key={Arbeit}> <td>{Arbeit}</td> </tr>}</tbody>
Sorry, ich verpasste die Schließung
)
auf diemap
Funktion. Ich habe aktualisiert es.Es funktioniert 🙂 . vielen Dank für die Hilfe. ich verstehe, dass ich habe zu studieren noch viel mehr. 🙂 🙂 !! Danke!!!!
Gerne 🙂
InformationsquelleAutor Patrick Grimard