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

问题描述

我需要帮助才能在我的应用中创建搜索过滤器.它是一个简单的应用程序，用于学习目的.

目标是创建一个搜索过滤器.我在 search_bar 容器中有 state，我想我需要将它作为道具传递给我的 work_list 容器.但我不知道该怎么做.从那个阶段开始，我会做这样的事情.

work_list.js

renderWork() {让filteredWorks = this.props.works.filter((work) => {返回 work.title.indexOf(this.state.init) !== -1;});返回filteredWorks.map((work) => {返回 (<tr><td>{work.title}</td></tr>);});}

不知道逻辑对不对.需要帮助.

app.js

import React, { Component } from 'react';从 '../containers/search_bar' 导入 SearchBar；从'../containers/work_list.js'导入工作列表；导出默认类 App 扩展组件 {使成为() {返回 (<div><搜索栏/><工作列表/>

);}}

search_bar.js

import React, { Component } from 'react';导出默认类 SearchBar 扩展组件 {构造函数(道具){超级(道具)；this.state = { init: '' };this.onInputChange = this.onInputChange.bind(this);}onInputChange(事件){this.setState({ init: event.target.value });}onFormSubmit(事件){event.preventDefault();}使成为() {返回 (<表格onSubmit={this.onFormSubmit}className="输入组"><输入类名=表单控件"placeholder = "Procurar Trabalho"onChange={this.onInputChange}值={this.state.init}/><span className="input-group-btn"><button type="submit" className="btn btn-secondary">Pesquisar</button></span></表单>);}}

work_list.js

import React, { Component } from 'react';从'react-redux'导入{连接}；从'../actions/index'导入{fetchWork}；类工作列表扩展组件{渲染工作(){返回 this.props.works.map((work) => {返回 (<tr><td>{work.title}</td></tr>);});}使成为() {返回 (<table className="table table-hover"><头><tr><th>Nome</th></tr></thead>{this.renderWork() }</tbody>);}}函数 mapStateToProps(state) {返回 {作品:state.works}}导出默认连接(mapStateToProps)(工作列表)；

我的减速器

reducer_work.js

导出默认函数(){返回 [{ title: 'Mirististica' },{ 标题:'兽医' }];}

index.js

import { combineReducers } from 'redux';从'./reducer_work'导入MostrarTrabalhos；const rootReducer = combineReducers({作品:MostrarTrabalhos});导出默认的 rootReducer；

谢谢！

解决方案

看起来您的代码缺少 Redux 工作的一些关键元素.当您的搜索输入更改时，您需要调度 Redux 操作，这将反过来更新存储.现在，您只是在输入更改时设置 SearchBar 的本地状态.其次，您的减速器不会修改状态，它总是返回相同的数组.

类似的东西.

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

export const SEARCH = 'SEARCH';导出函数搜索(值){返回{类型:搜索，值}；}

那么你的减速器可能看起来像这样:

import {SEARCH} from './actions';const initialState = {contents: ['Mirististica', 'Vet'], value: '', works: []};导出默认函数reducer(state = initialState, action) {开关(动作.类型){案例搜索:{const {value} = 动作；const 作品 = state.contents.filter((val) => val.includes(value));返回 {...状态，值，作品}；}默认:返回状态；}}

然后在您的 SearchBar 中:

import React, {Component} from 'react';从'react-redux'导入{connect}；从redux"导入{bindActionCreators}；从 './actions' 导入 {search}；类 SearchBar 扩展组件 {使成为() {const {search, value} = this.props;返回 (<输入类名=表单控件"placeholder = "Procurar Trabalho"onChange={(e) =>搜索(e.target.value)}值={值}/>);}}函数 mapStateToProps({works}) {返回{值:作品.值}；}函数 mapDispatchToProps(dispatch) {返回 bindActionCreators({search}, dispatch);}导出默认连接(mapStateToProps，mapDispatchToProps)(SearchBar)；

你的 WorkList 组件只需要监听 Redux store 中 works 的变化.

import React, { Component } from 'react';从'react-redux'导入{连接}；类工作列表扩展组件{使成为() {const {works} = this.props;返回 (<table className="table table-hover"><头><tr><th>Nome</th></tr></thead><tbody>{works.map((work) => <tr key={work}><td>{work}</td></tr>)}</tbody>);}}函数 mapStateToProps({works}) {返回 {作品:works.works}}导出默认连接(mapStateToProps)(工作列表)；

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屋！