在React JS中，一次点击选中两个复选框

Question

我有一个组件(Fuel)，我在其他两个组件(Search和SmallFilters)中使用:

搜索组件如下:

class search extends React.Component {
    render() {
        const language = this.props.language.default.portal;
        return (
            <div>
                <div className="searchTitle"><FontAwesome name="search" className="portalFaIcon"/>  {language.search}</div>
                <Fuel language={language} actionFilters={this.props.actionFilters} filters={this.props.filters}/>
            </div>
        );
    }
}
function mapStateToProps(state, ownProps){
    return {
        favorites: state.favorites,
        filters: state.filters,
        carsToShow: state.carsToShow
    };
}
function mapDispatchToProps(dispatch){
    return {
        actionFilters: bindActionCreators(filterActions, dispatch),
        actionCarsToShow: bindActionCreators(actionCarsToShow, dispatch)
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(search);

SmallFilters如下所示:

render(){
    return (
        <div className="filters noPadding col-xl-8 col-lg-6 col-md-6 col-sm-5 col-xs-12">
            <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
                <Fuel recap={true} title={_.startCase(_.toLower(filter_names.fuel))} {...this.props}/>
            </ReactCSSTransitionGroup>
        </div>
    );
}

燃料组件如下:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import {Link} from 'react-router';
import { filter_names } from './filterActions';
export default class fuel extends React.Component {
    constructor(props){
        super(props);
        this.state = this.getFilterValues()
    }
    emptyValues(){
        return {
            checkboxDiesel: false,
            checkboxBenzine: false
        }
    }
    handleFilter(){
        if(this.state.checkboxDiesel || this.state.checkboxBenzine){
            this.props.actionFilters.addFuelFilter(this.state);
        }else{
            this.props.actionFilters.removeFuelFilter();
        }
    }
    handleDiesel(event){
        const checkbox = event.target.checked;
        this.setState({checkboxDiesel: checkbox, checkboxBenzine: this.state.checkboxBenzine}, () => this.handleFilter());
    }
    handleBenzine(event){
        const checkbox = event.target.checked;
        this.setState({checkboxBenzine: checkbox, checkboxDiesel: this.state.checkboxDiesel}, () => this.handleFilter());
    }
    deActivate(event) {
        event.preventDefault();
        this.setState(this.emptyValues(), () => this.handleFilter());
    }
    getFilterValues(){
        debugger;
        if(!this.props.filters.some(i => i.name === filter_names.fuel)){
            return this.emptyValues();
        }
        return {
            checkboxDiesel: this.props.filters.filter(f => f.name === filter_names.fuel).map(i => i.values.map(v => v.checkboxDiesel)),
            checkboxBenzine: this.props.filters.filter(f => f.name === filter_names.fuel).map(i => i.values.map(v => v.checkboxBenzine))
        };
        /*let values = {};
        this.props.filters.filter(f => {
            if(f.name == filter_names.fuel){
                values.checkboxDiesel = f.values[0].checkboxDiesel;
                values.checkboxBenzine = f.values[0].checkboxBenzine;
            }
        });
        return values;*/
    }
    renderSmall() {
        let diesel = this.getFilterValues().checkboxDiesel ? "Diesel" : "";
        let benzine = this.getFilterValues().checkboxBenzine ? "Benzine" : "";
        return (
            <div className="filter">
                {this.props.title} <Link to="" onClick={this.deActivate.bind(this)}><FontAwesome name="times" className="portalFaRedIcon"/></Link>
                <div className="filterValues">{diesel} {benzine}</div>
            </div>
        );
    }
    render() {
        const language = this.props.language;
        if(this.props.recap) return this.renderSmall();
        console.log(this.props.filters);
        return (
            <div>
                <div className="priceTitle" style={{padding: '5px 0'}}>{language.fuel}</div>
                <div className="transmissionValues">
                    <input type="checkbox" onChange={this.handleDiesel.bind(this)} checked={this.getFilterValues().checkboxDiesel}/> <span>Diesel</span>
                </div>
                <div className="transmissionValues">
                    <input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/> <span>Benzine</span>
                </div>
            </div>
        );
    }
}

问题是，当我单击其中一个复选框时，两个复选框都被选中。如果我点击同一个复选框，两个都是未选中的。但是如果我点击另一个，什么也没发生。

This.props。过滤器来自redux store，如果其中一个复选框被选中，它是这样的:

[{name: "FUEL", values: [{checkboxDiesel: true, checkboxBenzine: false}]}]

任何建议吗?

Answer 1

从长远来看，我认为您应该使用this.state来更新输入的值。从文档中读取受控组件。

render() {
    const language = this.props.language;
    if(this.props.recap) return this.renderSmall();
    console.log(this.props.filters);
    return (
        <div>
            <div className="priceTitle" style={{padding: '5px 0'}}>{language.fuel}</div>
            <div className="transmissionValues">
                <input type="checkbox" onChange={this.handleDiesel.bind(this)} checked={this.state.checkboxDiesel}/> <span>Diesel</span>
            </div>
            <div className="transmissionValues">
                <input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.state.checkboxBenzine}/> <span>Benzine</span>
            </div>
        </div>
    );
}

如果此操作有任何副作用，您可以在handleDiesel或handleBenzine方法中执行。如果它有效，请告诉我。同时，我会试着从你的代码中理解更多。