Получение Флажок состояния в React JS

Question

Моего код выглядит следующим образом:

import React from 'react'; 
import FontAwesome from 'react-fontawesome'; 
import {Link} from 'react-router'; 
import { filter_names } from './filterActions'; 
import _ from 'lodash'; 

export default class fuel extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
      values: {} 
     } 
    } 


    handleFuel(name, event){ 
     let checkbox = event.target.checked; 
     let nValues = _.clone(this.state.values); 
     nValues.type = name; 
     nValues.active = checkbox; 
     this.setState({values: nValues}); 
    } 



    render() { 
     const language = this.props.language; 

     return (
      <div> 
       <div className="priceTitle" style={{padding: '5px 0'}}>{language.fuel}</div> 
       <div className="transmissionValues"> 
        {_.uniq(this.props.allCarsInTheList.map(i => i.fuel)).map((v, i) => { 
         return (<div key={i}><input type="checkbox" onChange={this.handleFuel.bind(this, v)} checked={true}/> <span>{v}</span></div>); 
        })} 
       </div> 
       {/*<div className="transmissionValues"> 
        <input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/> <span>Benzine</span> 
       </div>*/} 
      </div> 
     ); 
    } 
} 

Я картографирование через мои данные и в зависимости от области топлива Я оказывающий флажки. Таким образом, я не хочу менять код, если меняют данные. Но теперь у меня есть проблема, чтобы проверить, установлен ли флажок или нет.

В функции handleFuel Я добавляю данные в состояние, и если флажок установлен, состояние (this.state.values) должно быть чем-то вроде {type: "Diesel", active: "True"}.

А затем в рендеринг мне нужно как-то активировать состояние. Я пробовал что-то вроде let checkboxState = Object.keys(this.state.values).length > 0 ? this.state.values.filter(i => i.type === v).active : false;, но это не сработало.

Любые советы?

UPDATE

let allCarsInTheList = [ 
    { 
     id: 1, 
     listID: 3, 
     make: "Audi", 
     model: "Q5", 
     desc: "2.0 CR TDi Comfortline BMT", 
     price: 12484, 
     mileage: 120021, 
     fuel: "Diesel", 
     engine: '105/77', 
     chassis: "WAUZZZ4G4FN026103" 
    }, { 
     id: 2, 
     listID: 3, 
     make: "Audi", 
     model: "Q5", 
     desc: "2.0 CR TDi Comfortline BMT", 
     price: 12484, 
     mileage: 120021, 
     fuel: "Benzine", 
     engine: '105/77', 
     chassis: "WAUZZZ4G4FN026103" 
    }, { 
     id: 3, 
     listID: 3, 
     make: "Audi", 
     model: "Q5", 
     desc: "2.0 CR TDi Comfortline BMT", 
     price: 12484, 
     mileage: 120021, 
     fuel: "Diesel", 
     engine: '105/77', 
     chassis: "WAUZZZ4G4FN026103" 
    }, { 
     id: 4, 
     listID: 3, 
     make: "Audi", 
     model: "Q5", 
     desc: "2.0 CR TDi Comfortline BMT", 
     price: 12484, 
     mileage: 120021, 
     fuel: "Diesel", 
     engine: '105/77', 
     chassis: "WAUZZZ4G4FN026103" 
    } 
] 

Answer 1

вы случайно проходя v, а не событие в обработчик щелчка. чтобы помочь остановить путаницу, я бы добавил бункер в constructor.

this.handleFuel = this.handleFuel.bind(this); 

тогда ваш флажок становится немного легче читать тоже:

<input type="checkbox" onChange={(e) => this.handleFuel(v, e)} checked={true}/> 

пс, должны быть checked={true}defaultChecked={true}?

Answer 2

Hi @Boky Вы можете попробовать что-то вроде этого, обратите внимание, что это должно работать только тогда, когда у вас есть начальное состояние с самого начала, когда вы устанавливаете флажки в false или true. Поскольку мы запускаем this.isChecked(), как только componentDidMount предлагаю вам принять состояние, вы можете использовать defaultChecked для статуса "fake". Не можете полностью понять, что происходит, но из того, что я вижу, это должно занять вас, где вы хотите. Удачи

import React from 'react'; 
import FontAwesome from 'react-fontawesome'; 
import {Link} from 'react-router'; 
import { filter_names } from './filterActions'; 
import _ from 'lodash'; 

export default class fuel extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     values: {} 
     }; 
     this.handleFuel = this.handleFuel.bind(this); 
     this.isChecked = this.isChecked.bind(this); 
    } 

    handleFuel(name, event){ 
     let checkbox = event.target.checked; 
     let nValues = _.clone(this.state.values); 
     nValues.type = name; 
     nValues.active = checkbox; 
     this.setState({ values: nValues }); 
    } 

    isChecked(name) { 
     const { values } = this.state; 
     let isChecked; 
     const checkbox = values.find((c) => c.name === name); 
     if (checkbox) isChecked = checkbox.active; 
     return isChecked; 
    } 

    render() { 
     const { values } = this.state; 
     const { language, allCarsInTheList } = this.props; 
     return (
      <div> 
       <div className="priceTitle" style={{padding: '5px 0'}}> 
       {language.fuel} 
       </div> 
       <div className="transmissionValues"> 
       {_.uniq(allCarsInTheList.map(i => i.fuel)).map((name, i) => (
        <div key={i}> 
        <input 
         type="checkbox" 
         onChange={(event) => this.handleFuel(name, event)} 
         checked={this.isChecked(name)} 
        /> 
        <span>{name}</span> 
        </div> 
       ))} 
       </div> 
      </div> 
     ); 
    } 
}