react-redux实现，搜索

- 日理万妓 2022-04-15 00:49 237阅读 0赞

1.home.js

import React, { Component } from "react";
    import { connect } from 'react-redux'
    import {
      Table,
      Menu,
      Icon,
      Popup,
      Button,
      Header,
      Input
    } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    import "./DeviceList.css";
    import {getPatientInfo } from "../action/searchAction.js";
    class Home extends Component {
      constructor(props) {
        super(props);
        this.state = {
          searchQuery: "",
          sirenId: "",
          userId: "",
          fullName: "",
          phone: "",
          isSearchOpen: false
        };
      }
      handleSearchItemsChange(searchText,event) {
        if(searchText === 'sirenId'){
          this.setState({sirenId:event.target.value});
        }else if(searchText === 'userId'){
          this.setState({userId:event.target.value});
        }else if(searchText === 'fullName'){
          this.setState({fullName:event.target.value});
        }else if(searchText === 'phone'){
          this.setState({phone:event.target.value});
        }
      }
    
      searchItems = () => {
        const{getPatientInfo} = this.props;
        getPatientInfo(this,this.props.listPatients);
      };
    
      render() {
        let self = this;
        return (
          <div className="device-list-container">
            <Header as="h2" style={
       { float: "left" }}>
              <Icon name="treatment" />
              <Header.Content>User List</Header.Content>
            </Header>
            <div id="user-search-bar">
              <Popup
                trigger={
                  <Input
                    icon={
                      <Icon
                        name="search"
                        onClick={() => self.searchItems()}
                        circular
                        link
                      />
                    }
                    placeholder="Search..."
                    id="search-bar"
                    value={this.state.searchQuery}
                  />
                }
                position="bottom left"
                flowing
                on="click"
              >
                <div className="search-item-container">
                  <Input
                    label="Siren ID"
                    placeholder="siren id"
                    className="search-items"
                    value={this.state.sirenId}
                    onChange={event=>this.handleSearchItemsChange("sirenId",event)}
                  />
                  <br />
                  <Input
                    label="User ID"
                    placeholder="user id"
                    className="search-items"
                    value={this.state.userId}
                    onChange={event=>this.handleSearchItemsChange("userId",event)}
                  />
                  <br />
                  <Input
                    label="Name "
                    placeholder="name"
                    className="search-items"
                    value={this.state.fullName}
                    onChange={event=>this.handleSearchItemsChange("fullName",event)}
                  />
                  <br />
                  <Input
                    label="Phone "
                    placeholder="phone"
                    className="search-items"
                    value={this.state.phone}
                    onChange={event=>this.handleSearchItemsChange("phone",event)}
                  />
                </div>
              </Popup>
            </div>
          </div>
        );
      }
    }
    
    const mapStateToProp = state => ({
      listPatients: state.patientsListStore.listPatients
    });
    const mapDispatchToProp = dispatch => ({
      getPatientInfo: (self,patientList) => dispatch(getPatientInfo(self,patientList))
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(Home);

2.searchAction.js

import * as TYPES from "../types/types";
    import { listPatients,getPatient } from "../graphql/queries";
    import { graphqlOperation, API } from "aws-amplify";
    export function getPatientInfo(self,patientList){
      return dispatch=>{
        const patients = [];
        patientList.map(item=>{
          if(
            (self.state.sirenId != null && item.sirenId===parseInt(self.state.sirenId))
          ||(self.state.userId != null && item.userId===self.state.userId)
          ||(self.state.fullName != null && item.fullName===self.state.fullName)
          ||(self.state.phone != null && item.phone===self.state.phone)
          ){
            patients.push(item);
          }
        });
        console.log('patients: ',patients);
        dispatch(changeSearchListState(patients));
      };
    }
    
    function changeSearchListState(patients){
      return{
        type: TYPES.SEARCH_LIST,
        text: patients
      }
    }

3.type.js

export const SEARCH_LIST = "search_list";

4.searchReducer.js

import * as TYPES from "../types/types";
    
    const initialState = {
      listPatients: [],
      patientStatus: {}
    };
    
    export default function patientsList(state = initialState, action) {
      switch (action.type) {
        case TYPES.SEARCH_LIST:
          return{
            ...state,
            listPatients: action.text
          }
        default:
          return state;
      }
    }