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.filters来自redux商店，如果选中其中一个复选框，它就是这样的：

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

有什么建议吗？

Answer 1

我认为您应该使用this.state更新输入值。从文档中阅读controlled components。

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方法执行此操作。如果有效，请告诉我。与此同时，我会尝试从您的代码中了解更多信息。

在React JS中单击一个复选框

1 个答案: