2つのチェックボックスは、私は私は2つの他のコンポーネント（検索とSmallFilters）で使用一つの成分（燃料）を持っているJS

Question

に反応します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> 
     ); 
    } 
} 

問題は、これらのチェックボックスの1つをクリックすると両方がチェックされることです。同じチェックボックスをクリックするとチェックが外されます。しかし、私が他のものをクリックすると何も起こらない。

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方法でそれを行うことができます。それが動作するかどうか私に教えてください。一方、私はあなたのコードからもっと理解しようとします。