Question

我有一个组件，该组件显示用于过滤数据的复选框列表。在我的FilterRecipes组件中，我创建了一个名为checkboxes的状态，并使用该状态映射到checkbox组件上，在该组件上显示了不同类型的checkbox的列表。现在，我有一个复选框列表，并创建了一个名为handleCheckedBoxes的函数来指示要选中哪个复选框。但是，我要的是当用户单击某个复选框时，我希望对RecipeCard进行过滤。

我认为有可能导致此问题的一件事。我的复选框状态在组件FilteredRecipes中，而RecipeCard在SelectRecipes组件中。我认为复选框状态不能更新为RecipeCard，因为它必须位于SelectRecipes组件中。我认为通过为复选框创建状态可以使代码更简单。请让我知道是否可以采用更好的方法。


class SelectRecipes extends Component {
    state = {
        recipes: 
           [ {
                name: 'dessert',
                description:""
            }

        ],
        filteredRecipes: []   

    }

    handleFilterName = (e) => {

        const recipes = this.state.recipes
        const filteredRecipeName = recipes.filter( recipe => {
            return (
                recipes.name.toLowerCase().search(e.target.value.toLowerCase()) == -1
            );

        })
        this.setState({filteredRecipes: filteredRecipeName})
    }

    render() {
        return (
            <div>
                 <NavHeader/> 
 <SearchRecipes handleFilterName={this.handleFilterName.bind(this)}/> 
                <FilterRecipes recipes={this.state.recipes}  
 handleFilterType={(e) => this.handleFilterType(e)} ></FilterStrain>

               <RecipeCard  recipes={this.state.filteredRecipes}></StrainCard>
            </div>
        )
    }
}


SelectRecipes.propTypes = {
    recipes: PropTypes.array,
    filteredRecipes: PropTypes.array,

}

export default SelectRecipes


class FilterRecipes extends Component {

    state = {
        checkboxes: [
            {id: 1, value: "dessert", isChecked: false},
            {id: 2, value: "dinner", isChecked: false},
            {id: 3, value: "breakfast", isChecked: false},
          ],

          filterRecipe: []
    }

    handleCheckedBoxes = (event) => {
        let checkboxes = this.state.checkboxes

        checkboxes.forEach(check => {
           if (check.value === event.target.value)
           check.isChecked =  event.target.checked 
        })
        this.setState({checkboxes: checkboxes})
      }

      updateType = (event) => {
        let recipes = this.props.recipes

        const filterRecipe = recipes.filter(recipe => {

            return recipe.name.match(event.target.value)
        })
        this.setState({filterRecipe })
      }

    render() {
        return (
            <div>
              <Card style={{ width: '20rem', height: '100rem'}} >
                 <Card.Body>

                    <Card.Title>Type</Card.Title>
                       <ul>
                         {
                         this.state.checkboxes.map( (check, index) => {
                          return  <Checkbox recipes= {this.props.recipes} updateType={this.updateType} handleCheckedBoxes={this.handleCheckedBoxes} key={index} {...check}/>
                                }) 
                            </ul>

                            <Card.Title>Mood</Card.Title>
                        </Card.Body>
                    </Card>
            </div>
        )
    }
}

FilterRecipes.propTypes = {
    checkboxes: PropTypes.object,
    filterStrainType: PropTypes.array.isRequired
}

export default FilterRecipes


const Checkbox = (props) => {

    return (
        <li>
        <input key={props.id}  recipes={props.recipes} onClick={props.updateType} onChange={props.handleCheckedBoxes} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
       </li>
    )

}

export default Checkbox

无法通过多个复选框reactjs

0 个答案: