兩個複選框上點擊檢查陣營JS

Question

我有一個組件（燃料），我在這兩個組件的使用（搜索和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方法。讓我知道它是否有效。同時，我會嘗試從您的代碼中瞭解更多。