두 확인란은

Question

가

나는 하나 개의 구성 요소 나는이 개 다른 구성 요소에 사용 (연료) (검색 및 SmallFilters)이 한 JS 반응 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 방법으로 그렇게 할 수 있습니다. 작동하는지 알려주세요. 한편, 나는 당신의 코드에서 더 많은 것을 이해하려고 노력할 것이다.