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;这样的东西，但它没有用。

有什么建议吗？

更新

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}/>

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> ); } }状态，因为我们无法完全理解＆＃39 ; s继续，但从我看到这应该带你到你想要的地方。祝你好运

if (window.plugins.insomnia && window.plugins.insomnia.keepAwake) {
  window.plugins.insomnia.keepAwake(onSuccess,onError);
} else {
    alert("insomnia plugin missing");
}

在React JS中获取复选框状态

2 个答案: