获取复选框状态作出反应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> 
     ); 
    } 
}