React-Redux - 创建搜索过滤器[关闭]

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

目标是创建一个搜索过滤器。我有state在 search_bar 容器中，我认为我需要将其作为道具传递给我的 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>
      );
    });
  }

不知道逻辑对不对。需要帮忙。

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

工作列表.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);

我的减速机

减速器_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;

谢谢 ！

您的代码似乎缺少 Redux 工作的一些关键元素。当您的搜索输入发生变化时，您需要分派 Redux 操作，从而更新存储。现在你只是设置本地状态SearchBar当输入改变时。其次，你的减速器不会修改状态，它总是返回相同的数组。

沿着这些思路。

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

export const SEARCH = 'SEARCH';

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

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

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

然后在你的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组件只需要监听更改works在 Redux 商店中。

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