Erste Checkbox Zustand Reagieren in JS

Question

Mein Code ist wie folgt:

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> 
     ); 
    } 
} 

ich meine Daten abbildet durch und abhängig von Kraftstoff Feld I Kontrollkästchen bin Rendering. Daher möchte ich den Code nicht ändern, wenn meine Daten geändert werden. Aber jetzt habe ich Probleme zu überprüfen, ob das Kontrollkästchen aktiviert ist oder nicht.

In handleFuel Funktion ich Daten hinzufügen, um den Zustand, und wenn Kontrollkästchen geändert wird, sollte der Zustand (this.state.values) etwas wie {type: "Diesel", active: "True"} sein.

Und dann in den Render brauche ich irgendwie den Zustand aktiv zu bekommen. Ich habe versucht mit etwas wie let checkboxState = Object.keys(this.state.values).length > 0 ? this.state.values.filter(i => i.type === v).active : false;, aber es hat nicht funktioniert.

Irgendwelche Ratschläge?

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

sind Sie versehentlich eher in v vorbei als Ereignis in Ihrem Click-Handler. um Verwirrung zu vermeiden, würde ich den Behälter in die constructor hinzufügen.

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

dann Checkbox wird ein bisschen leichter zu lesen:

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

ps sollte checked={true}defaultChecked={true} sein?

Answer 2

Hallo @Boky Sie können so etwas versuchen, beachten Sie, dass dies nur funktionieren sollte, wenn Sie den Anfangszustand von Anfang an haben, wo Sie die Checkboxen auf falsch oder wahr setzen. Weil wir this.isChecked() laufen lassen, sobald die componentDidMount Ich schlage vor, dass Sie den Zustand nehmen, den Sie defaultChecked für "fake" Status verwenden können. Kann nicht völlig verstehen, was los ist, aber von was ich sehe, das sollte Sie wohin Sie wollen. Viel Glück

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> 
     ); 
    } 
}