需要将复选框过滤数据从子组件发送到父组件：React Hooks、Redux

Question

我有一个父组件（产品 List.jsx），我在其中显示来自商店的数据。现在我有子组件（Side Nav.jsx），我在“handleCheckChnage”函数中有复选框过滤数据，现在我需要将过滤数据发送到父组件（Product List.jsx）并显示数据因此，我被击中了，任何人都可以帮忙吗，在此先感谢..

这是父组件（产品List.jsx）

const ProductList = () => {

      let dispatch = useDispatch();
      
      let getalldatafromserver = useSelector((state)=>{
              return state.FetchALLProducts;
      })

      useEffect(() => {
        
         dispatch(allActions.fetchallproducts());
        
      }, [])

   
        return (

            <React.Fragment>
              
                <div className="container">
                      <div className="row">
                          <div className="col-md-2">
                               <SideNav /> 
                          </div>
                          <div className="col-md-10">
                          <section className="mt-3">
                    <div className="container">
                        <div className="row">
                            <div className="col">
                                <p className="h3 text-success">Product List</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex impedit, incidunt ipsum nulla sapiente sint suscipit? A animi, error et fuga ipsum minus, nam officia praesentium quisquam, recusandae soluta voluptate?</p>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <div className="container">
                        <div className="row">
                            {
                               getalldatafromserver.products.length > 0 &&
                                getalldatafromserver.products.map(product => {
                                    return (
                                        <div className="col-md-3" key={product.id}>
                                            <div className="card">
                                                <div className="card-header text-center bg-white">
                                                    <img src={product.image} alt="" width="150" height="150"/>
                                                </div>
                                                <div className="card-body rgba-light-green-light">
                                                    <ul className="list-group">
                                                        <li className="list-group-item">
                                                            NAME : {product.name}
                                                        </li>
                                                        <li className="list-group-item">
                                                            PRICE : {product.price}
                                                        </li>
                                                        <li className="list-group-item">
                                                            QTY : {product.qty} Kgs
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="row">
                            <div className="col">
                                {
                                    // for empty data
                                    getalldatafromserver.products.length === 0 &&
                                    <p  className="font-weight-bold text-success text-center fw-bold">NO Records Found in Database</p>
                                }
                            </div>
                        </div>
                    </div>
                </section>
                           </div>
                      </div>
                    </div>
                
            </React.Fragment>

这是子组件（边Nav.jsx）

const SideNav = () => {

    //Get data from Store
    const getDataFromStore = useSelector((state)=>{
          return state.FetchALLProducts;
    })
     
    //console.log(getDataFromStore.products);

   const [sidebar, setsidebar] = useState(false);

    const [checkUpdate, setcheckUpdate] = useState('')

   const [checkBoxes, setcheckBoxes] = useState([
    {name:"Orange",isChecked:false},
    {name:"Carrot",isChecked:false},
    {name:"Apple",isChecked:false},
    {name:"Potato",isChecked:false},
    {name:"Avacados",isChecked:false}
])

   const showSidebar =() =>{
        setsidebar(true);
   }

    const handleCheckChnage =(e) =>{
        //console.log(e.target.value);
        var allcheckboxes = [...checkBoxes];
        //console.log(allcheckboxes);
            allcheckboxes.forEach((cbox)=>{
                  if(cbox.name === e.target.value){
                      if(cbox.isChecked){
                          cbox.isChecked =false
                      }else{
                          cbox.isChecked = true
                      }
                  }
            })
              setcheckBoxes(allcheckboxes);

              let defaultData = [...getDataFromStore.products];

                 const filter = defaultData.filter((newData)=>{
                          //console.log(newData);
                          if(e.target.value === newData.name){
                             // console.log(newData);
                             if(e.target.checked){
                                console.log(newData);
                                setcheckUpdate(newData);
                               
                             }else if(!e.target.checked){
                                console.log(defaultData);
                             }
                          }
                 })
              
    }

    const selectAll =(e) =>{
        //console.log(e.target.checked);
        let newcheckboxes = [...checkBoxes];
        if(e.target.checked){
            newcheckboxes.forEach((allbox)=>{
                  allbox.isChecked = true;
            })
        }else{
            newcheckboxes.forEach((allbox)=>{
                allbox.isChecked = false;
          })
        }
        setcheckBoxes(newcheckboxes);
    }

    return (
        <React.Fragment>
         <i className="fas fa-align-justify yes" onClick={showSidebar} ></i>
            {
                sidebar &&
                <div className="form-group mt-3">
                <label className="mb-2 fw-bold">Choose Health</label> <br/>
                <input className="form-check-input" type="checkbox" name="all" onChange={(e)=>{selectAll(e)}} />
                <span style={{marginLeft:'5px',fontWeight:"bold"}}>All Skils</span>
                 {
                      checkBoxes.map((cb)=>
                      <div className="form-check">
                     <label className="form-check-label" >{cb.name}</label>
                    <input className="form-check-input" type="checkbox" name="checking" value={cb.name} checked={cb.isChecked} onChange={(e)=>{handleCheckChnage(e)}} />
                  </div>
                  ) 
                 }
                </div>
            }
   
    
        </React.Fragment>
    )
}

export default SideNav;

这里是 Reducer

let initialstate ={
    loading : false,
    products :[],
    singleproduct :{},
    error : ''

}

 export const reducer = (state =initialstate , action) => {
    switch (action.type) {
        case bigActions.GET_ALL_PRODUCTS :
            return {
                ...state,
                products : action.payload
            }
           
            case bigActions.CREATE_ALL_PRODUCTS_REQUEST : 
            return {
                  ...state,
                  loading : true
            }

            case bigActions.CREATE_ALL_PRODUCTS_SUCCESS : 
            return {
                  ...state,
                  loading : false
            }

            case bigActions.CREATE_ALL_PRODUCTS_FAILURE : 
            return {
                  ...state,
                  loading : false
            }
            
            case bigActions.DELETE_ALL_PRODUCTS_REQUEST :
                return {
                    ...state,
                    loading : true
                }
                case bigActions.DELETE_ALL_PRODUCTS_SUCCESS :
                return {
                    ...state,
                    loading : false
                }

                case bigActions.DELETE_ALL_PRODUCTS_FAILURE :
                return {
                    ...state,
                    loading : false
                }

                case bigActions.GET_SINGLE_PRODUCTS_REQUEST :
                    return {
                        ...state,
                        loading : true
                    }
                 
                    case bigActions.GET_SINGLE_PRODUCTS_SUCCESS :
                    return {
                        ...state,
                        loading : false,
                        singleproduct : action.payload
                    }

                    case bigActions.GET_SINGLE_PRODUCTS_FAILURE :
                    return {
                        ...state,
                        loading : false
                    }
                   
                    case bigActions.UPDATE_PRODUCT_FORM :
                        return {
                            ...state,
                            singleproduct: {
                                ...state.singleproduct,
                                [action.payload.key] : action.payload.value
                            }
                        }

                        case bigActions.UPDATE_PRODUCT_SUCCESS:
                            return {
                                   ...state,
                              loading : false
                                     };
            default: return state
    }
}

这是操作

import axios from "axios";

export const GET_ALL_PRODUCTS ="GET_ALL_PRODUCTS";
export const UPDATE_PRODUCT_FORM ="UPDATE_PRODUCT_FORM";

export const CREATE_ALL_PRODUCTS_REQUEST ="CREATE_ALL_PRODUCTS_REQUEST";
export const CREATE_ALL_PRODUCTS_SUCCESS ="CREATE_ALL_PRODUCTS_SUCCESS";
export const CREATE_ALL_PRODUCTS_FAILURE ="CREATE_ALL_PRODUCTS_FAILURE";

export const DELETE_ALL_PRODUCTS_REQUEST ="DELETE_ALL_PRODUCTS_REQUEST";
export const DELETE_ALL_PRODUCTS_SUCCESS ="DELETE_ALL_PRODUCTS_SUCCESS";
export const DELETE_ALL_PRODUCTS_FAILURE ="DELETE_ALL_PRODUCTS_FAILURE";

export const GET_SINGLE_PRODUCTS_REQUEST ="GET_SINGLE_PRODUCTS_REQUEST";
export const GET_SINGLE_PRODUCTS_SUCCESS ="GET_SINGLE_PRODUCTS_SUCCESS";
export const GET_SINGLE_PRODUCTS_FAILURE ="GET_SINGLE_PRODUCTS_FAILURE";

export const UPDATE_PRODUCT_SUCCESS ="UPDATE_PRODUCT_SUCCESS";

export const fetchallproducts=()=>{
      return async (dispatch)=>{
           try {
          
              let dataUrl ="http://localhost:3000/users";
              let response = await axios.get(dataUrl);
              dispatch({type:GET_ALL_PRODUCTS, payload:response.data});

           } catch(error){
              console.log(error)
           }
      }
}

//Create a Product

export const createproduct =(product,history) =>{
   return async (dispatch)=>{
         try {
             dispatch({type:CREATE_ALL_PRODUCTS_REQUEST});
             let dataUrl ="http://localhost:3000/users";
             let response = await axios.post(dataUrl,product);
             dispatch({type:CREATE_ALL_PRODUCTS_SUCCESS,payload:response.data});
             history.push('/admindeatils');
         }catch(error){
            dispatch({type:CREATE_ALL_PRODUCTS_FAILURE,payload:error});
         }
   }
}

// Delete a Product
export const deleteproduct =(productId)=>{
   return async (dispatch) =>{
      try {
         dispatch({type:DELETE_ALL_PRODUCTS_REQUEST})
         let dataUrl =`http://localhost:3000/users/${productId.id}`;
         let res = await axios.delete(dataUrl);
         dispatch({type:DELETE_ALL_PRODUCTS_SUCCESS,payload:res.data});
         dispatch(fetchallproducts());
      } catch (error){
          dispatch({type:DELETE_ALL_PRODUCTS_FAILURE,payload:error})
      }
 
   }
}

// Get a Single Product

export const singleProduct =(id) =>{

   return {
      type:GET_SINGLE_PRODUCTS_SUCCESS,
      payload : id,
      
   }
      // return async (dispatch) =>{
      //     try{
      //          dispatch({type:GET_SINGLE_PRODUCTS_REQUEST});
      //          let dataURL = `http://localhost:3000/users/${id}`;
      //          let response = await axios.get(dataURL);
      //          dispatch({type:GET_SINGLE_PRODUCTS_SUCCESS,payload:response.data})
      //     } catch (error){
      //           dispatch({type:GET_SINGLE_PRODUCTS_FAILURE,payload:error})
      //     }
      // }
}

export const updateProductForm = (key, value) => {
   return (dispatch) => {
       dispatch({
           type: UPDATE_PRODUCT_FORM,
           payload : {key,value}
       });
   };
};

export const updateProduct = (product, productId , history) => {
   return async (dispatch) => {
       try {
           let dataURL = `http://localhost:3000/users/${productId}`;
           let response = await axios.put(dataURL,product);
           dispatch({type : UPDATE_PRODUCT_SUCCESS , payload : response.data});
           // redirect to Admin Page
           history.push('/admindeatils')
       }
       catch (error) {
         console.log(error)
       }
   };
};

Answer 1

您可以从 redux 存储中获取复选框的全部数据。

减速器

let initialstate ={
    loading : false,
    products :[],
    singleproduct :{},
    error : '',
    checkBoxes: [
    {name:"Orange",isChecked:false},
    {name:"Carrot",isChecked:false},
    {name:"Apple",isChecked:false},
    {name:"Potato",isChecked:false},
    {name:"Avacados",isChecked:false}
    ]

}

 export const reducer = (state =initialstate , action) => {
    switch (action.type) {
       // Earlier cases.
        case bigActions.UPDATE_CHECKBOXES:
            return {
                ...state,
                checkBoxes : action.payload
            }
           
            
       default: return state
    }
}

动作

import axios from "axios";


// Existing code...
export const UPDATE_CHECKBOXES ="UPDATE_CHECKBOXES";


// Existing code...
export const updateCheckBoxes = (checkBoxes) => { // checkboxes should contain the updated checkboxes from handleChange.
   return (dispatch) => {
       dispatch({
           type: UPDATE_CHECKBOXES,
           payload : checkBoxes
       });
   };
};

Sidenav 组件

const SideNav = () => {

    let dispatch = useDispatch();


    //Get data from Store
    const getDataFromStore = useSelector((state)=>{
          return state.FetchALLProducts;
    })
     
    //console.log(getDataFromStore.products);

   const [sidebar, setsidebar] = useState(false);

    const [checkUpdate, setcheckUpdate] = useState('')

   const {checkBoxes} = getDataFromStore

   const showSidebar =() =>{
        setsidebar(true);
   }

    const handleCheckChnage =(e) =>{
        //console.log(e.target.value);
        var allcheckboxes = [...checkBoxes];
        //console.log(allcheckboxes);
            allcheckboxes.forEach((cbox)=>{
                  if(cbox.name === e.target.value){
                      if(cbox.isChecked){
                          cbox.isChecked =false
                      }else{
                          cbox.isChecked = true
                      }
                  }
            })
              dispatch(allActions.updateCheckBoxes(allcheckboxes));

              let defaultData = [...getDataFromStore.products];

                 const filter = defaultData.filter((newData)=>{
                          //console.log(newData);
                          if(e.target.value === newData.name){
                             // console.log(newData);
                             if(e.target.checked){
                                console.log(newData);
                                setcheckUpdate(newData);
                               
                             }else if(!e.target.checked){
                                console.log(defaultData);
                             }
                          }
                 })
              
    }

    const selectAll =(e) =>{
        //console.log(e.target.checked);
        let newcheckboxes = [...checkBoxes];
        if(e.target.checked){
            newcheckboxes.forEach((allbox)=>{
                  allbox.isChecked = true;
            })
        }else{
            newcheckboxes.forEach((allbox)=>{
                allbox.isChecked = false;
          })
        }
        dispatch(allActions.updateCheckBoxes(newcheckboxes));
    }

    return (
        <React.Fragment>
         <i className="fas fa-align-justify yes" onClick={showSidebar} ></i>
            {
                sidebar &&
                <div className="form-group mt-3">
                <label className="mb-2 fw-bold">Choose Health</label> <br/>
                <input className="form-check-input" type="checkbox" name="all" onChange={(e)=>{selectAll(e)}} />
                <span style={{marginLeft:'5px',fontWeight:"bold"}}>All Skils</span>
                 {
                      checkBoxes.map((cb)=>
                      <div className="form-check">
                     <label className="form-check-label" >{cb.name}</label>
                    <input className="form-check-input" type="checkbox" name="checking" value={cb.name} checked={cb.isChecked} onChange={(e)=>{handleCheckChnage(e)}} />
                  </div>
                  ) 
                 }
                </div>
            }
   
    
        </React.Fragment>
    )
}

export default SideNav;

产品列表

const ProductList = () => {

      let dispatch = useDispatch();
      
      let getalldatafromserver = useSelector((state)=>{
              return state.FetchALLProducts;
      })
      
      const {checkBoxes} = getalldatafromserver; // You'll get the checkboxes data here

   
        return (<DOM></DOM>)
        }

需要将复选框过滤数据从子组件发送到父组件：React Hooks、Redux

Need to send the checkbox Filtered Data from Child Component to Parent Component : React Hooks, Redux

javascript

state-management

reactjs

redux

react-hooks