Question

我正在尝试在我的 Reactjs 应用程序（其中还包括一些 Redux）中创建一个过滤器功能。我是新手，所以我仍在尝试掌握 ReactJs。我希望能够搜索我的事项列表，返回原始列表或搜索结果。我的案件清单在我的 MattersContainer.js 中。

在我的应用中，我将 SearchBar.js 作为 App.js 的子组件。

class App extends React.Component {

  state = {
      filteredMatter: [],   
  }

  componentDidMount() {
      this.props.fetchMatters();   
  }

  onSearchSubmit = (searchTerm) => {    
      const filterResults = this.props.matters.filter(matter => matter.case_title.toLowerCase()
=== searchTerm.toLowerCase())   
      this.setState({filteredMatter: filterResults})           
  }

  render() {  
    return (
      <React.Fragment>
        <Router>      
            <NavBar />
            <SearchBar onSubmit={this.onSearchSubmit}/>            
            <Sidebar />
            <Switch>
              <div className="matters-container">
                <Route exact path='/' component={Home} />
                <Route exact path="/matters">
                  <MattersContainer matters={this.state.filteredMatter.length > 0 ? this.state.filteredMatter : this.props.matters}/>
                </Route>
                <Route exact path="/matters/new" render={(routerProps) => <MatterForm {...routerProps} />} />
                <Route exact path="/matters/:id" render={(routerProps) => {
                  const matterId = parseInt(routerProps.match.params.id)
                  // debugger
                  const matterObj = this.props.matters.find(matterArrObj => matterArrObj.id === matterId)
                  
                  if (matterObj) {
                    return (
                      <Matter key={matterObj.id}
                              matters={matterObj}
                              {...routerProps}
                      />
                      )
                  } 
                }
                }/>
                <Route path='/tasks' component={TasksContainer} />
              </div> 
                  
            </Switch>
        </Router>
      </React.Fragment>
    )   } }

const mapStateToProps = state => {   
    return ({
        matters: state.matterReducer.matters   
    }) 
}

export default connect(mapStateToProps, {fetchMatters})(App)`

> 我的 SearchBar.js 看起来像这样：

import React, { Component } from 'react'

export default class SearchBar extends Component {

    constructor() {
        super()
        this.state = {
            searchTerm: ''
        }
    }

    onInputChange = (event) => {
        this.setState({
            searchTerm: event.target.value
        })
    }

    onFormSubmit = (event) => {
        debugger
        event.preventDefault();
        this.props.onSubmit(this.state.searchTerm)
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <input 
                        type="text" 
                        value={this.state.searchTerm}
                        onChange={this.onInputChange} 
                    />
                    <button type="Submit">Search for a matter</button>
                </form>
            </div>
        )
    }
}

这是我的 MattersContainer：

class MattersContainer extends Component {

  render() {
    return (
      <>
      <div className="matter" >
        <h3>Your Matters</h3>   
        <Paper style={{ overflow:'hidden',margin: '5px', display: 'flex',justifyContent: 'space-between' }}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Matter</TableCell>
              <TableCell>Client</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
          {this.props.mattersArr.map(matter => (
              <TableRow key={matter.id} >
                <TableCell>
                    <Link to={`/matters/${matter.id}`}>{matter.case_title} </Link>              

                </TableCell>
                <TableCell>
                    {matter.client}
                </TableCell>
              </TableRow>
          ))}
          </TableBody>
        </Table>   
        </Paper>
        
      </div>
      </>
    )
  }
}

const mSTP = state => {
  return {mattersArr: state.matterReducer.matters};
}

const mDTP = dispatch => ({
  deleteMatter: id => dispatch({type: "DELETE_MATTER", id})
});

export default connect(mSTP, mDTP)(MattersContainer);

Answer 1

如果你不使用 Redux 来分发 state，你必须在 App.js 中初始化 state searchTemp

this.state = {
 searchTemp: null,
}

之后你创建函数 set state searchTemp:

const setSearchTemp =(searchKey)=>{
 this.setState({ searchTemp: searchKey });
}

并将函数 setSearchTemp 发送到组件 SearchBar 以获取关键字过滤器

ReactJs 过滤器返回一个对象

1 个答案: