獲取複選框狀態作出反應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中添加bin。

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

那麼你的複選框變得有點更容易閱讀過：

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

PS，應該checked={true}是defaultChecked={true}？

Answer 2

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