React-Redux - 创建一个搜索过滤器 [英] React-Redux - Create a Search Filter

问题描述

我需要帮助在我的应用中制作搜索过滤器。它是一个简单的应用程序，用于研究目的。

目标是创建一个搜索过滤器。我在search_bar容器中有状态，我想我需要将它作为道具传递给我的work_list容器。但我不知道该怎么做。从那个阶段我会做到这一点。

work_list.js

<$ pWorkout（）{

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>
）;
}）;



$ b我不知道逻辑是否正确。需要帮助。

app.js

 从'react'导入React，{Component}; 
从'../containers/search_bar'导入SearchBar; 
从'../containers/work_list.js'中导入WorkList; 
 
导出默认类应用扩展组件{
 render（）{
 return（
< div> 
< SearchBar /> 
< WorkList /> 
< / div> 
）; 
} 
} 
  

search_bar.js

 从'react'导入React，{Component}; 
 
导出默认类SearchBar扩展组件{
 
构造函数（道具）{
 super（道具）; 
 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 =submitclassName =btn btn-secondary> Pesquisar< / button> 
< / span> 
< / form> 
）; 
} 
} 
  

work_list.js

 从'react'导入React，{Component}; 
从'react-redux'导入{connect}; 
从'../actions/index'导入{fetchWork}; 
 $ b $ class WorkList extends Component {
 
 renderWork（）{
 return this.props.works.map（（work）=> {
 return （
 tr 
 lt td work worktitle}< / td> 
< / tr> 
）; 
}）; 
} 
 
 render（）{
 return（
< table className =table table-hover> 
< thead> 
< tr> 
 nome< th> 
< / tr> 
< / thead> 
< tbody> 
 { this.renderWork（）} 
< / tbody> 
< / table> 
 
）; 
 
 
 
函数mapStateToProps（state）{
 return {
 works：state.works 
} 
} 
 
导出默认连接（mapStateToProps）（WorkList）; 
  

My Reducers

reducer_work.js

  export default function（）{
 return [
 {title：'Mirististica'}，
 {title：'兽医'} 
]; 
} 
  

index.js

 从'redux'导入{combineReducers}; 
从'./reducer_work'导入MostrarTrabalhos; 
 
 const rootReducer = combineReducers（{
 works：MostrarTrabalhos 
}）; 
 
导出默认rootReducer; 
  

谢谢！

解决方案

看起来你的代码缺少Redux工作的一些关键元素。当您的搜索输入发生更改时，您需要分派Redux操作，以便更新商店。现在你只是在输入改变时设置 SearchBar 的本地状态。其次，你的reducer不会修改状态，它总是返回相同的数组。

这些行是。

您的操作文件可能如下所示：

  export const SEARCH ='SEARCH'; 
 
导出函数搜索（值）{
 return {type：SEARCH，value}; 
} 
  

然后你的reducer可能看起来像这样：

 从'./actions'导入{SEARCH}; 
 
 const initialState = {contents：['Mirististica'，'Vet']，value：''，works：[]}; 
 
导出默认函数reducer（state = initialState，action）{
 switch（action.type）{
 case搜索：{
 const {value} = action; 
 const works = state.contents.filter（（val）=> val.includes（value））; 
 return {... state，value，works}; 
} 
默认值：
返回状态; 
 
 
 $ / code> 

然后在 SearchBar ：

 从'react'导入React，{Component}; 
从'react-redux'导入{connect}; 
从'redux'导入{bindActionCreators}; 
从'./actions'导入{search}; 
 
 class SearchBar extends Component {
 render（）{
 const {search，value} = this.props; 
 
 return（
< input 
 className =form-control
 placeholder =Procurar Trabalho
 onChange = {（e）=> ; search（e.target.value）} 
 value = {value} /> 
）; 
 
 
 
函数mapStateToProps（{工程}）{
 return {value：works.value}; 
 
 
函数mapDispatchToProps（dispatch）{
返回bindActionCreators（{search}，dispatch）; 
} 
 
导出默认连接（mapStateToProps，mapDispatchToProps）（SearchBar）; 
  

您的 WorkList 组件只需要侦听更改为Redux商店中的 works 。

  import React，{Component } from'react'; 
从'react-redux'导入{connect}; 
 $ b $ class WorkList extends Component {
 render（）{
 const {works} = this.props; 
 
 return（
< table className =table table-hover> 
< thead> 
< tr> 
< th> ; Nome< / th> 
< / tr> 
< / thead> 
< tbody> {work.map（（work）=>< tr key = }>< td> {work}< / td>< / tr>）}< / tbody> 
< / table> 
）; 
 
 
 
函数mapStateToProps（{工程}）{
返回{
工程：works.works 
} 
 } 
 
导出默认连接（mapStateToProps）（WorkList）; 
  




i need help to make a Search Filter in my app. Its a simple app, used for study purposes.

The objective is to create a search filter. i have the state in search_bar container and i think i need to pass it as props to my work_list container. but i dont know how to do that. from that phase i will make it something like this.

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>
      );
    });
  }

I dont know if the logic is right. Need Help.

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);

My Reducers

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;

Thank You !

解决方案

It looks like your code is missing some key elements for Redux to work. You need to dispatch a Redux action when your search input changes that will in turn update the store. Right now you're merely setting the local state of SearchBar when the input changes. Secondly, your reducer doesn't modify the state, it's always returning the same array.

Something along these lines.

Your actions file might look like this:

export const SEARCH = 'SEARCH';

export function search(value) {
  return {type: SEARCH, value};
}

Then your reducer might look like this:

import {SEARCH} from './actions';

const initialState = {contents: ['Mirististica', 'Vet'], value: '', works: []};

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case SEARCH: {
      const {value} = action;
      const works = state.contents.filter((val) => val.includes(value));
      return {...state, value, works};
    }
    default:
      return state;
  }
}

Then in your SearchBar:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {search} from './actions';

class SearchBar extends Component {
  render() {
    const {search, value} = this.props;

    return (
        <input
          className="form-control"
          placeholder = "Procurar Trabalho"
          onChange={(e) => search(e.target.value)}
          value={value} />
    );
  }
} 

function mapStateToProps({works}) {
  return {value: works.value};
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({search}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

Your WorkList component merely needs to listen for changes to works in the Redux store.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class WorkList extends Component {
  render() {
    const {works} = this.props;

    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>{works.map((work) => <tr key={work}><td>{work}</td></tr>)}</tbody>
      </table>
    );
  }
}

function mapStateToProps({works}) {
  return {
    works: works.works
  }
}

export default connect(mapStateToProps)(WorkList);

这篇关于React-Redux - 创建一个搜索过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！