Javascript 获取React JS中的复选框状态

我的代码如下：

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

---

您意外地将

v

而不是事件传递到单击处理程序中。为了避免混淆，我将在

构造函数中添加绑定

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

然后，您的复选框也变得更容易阅读：

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

this.handleFuel（v，e）}选中={true}/>

ps，应该
checked={true}
be
defaultChecked={true}
？
Hi@Boky您可以尝试类似的方法，请注意，只有当您从一开始就具有初始状态，将复选框设置为false或true时，此方法才有效。因为一旦
组件挂载
我们就运行
this.isChecked（）
，所以我建议您使用
defaultChecked
的状态作为
的“假”
状态。。我不能完全理解发生了什么，但从我的观点来看，这应该会带你去你想去的地方。祝你好运

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

从“React”导入React；
从“react FontAwesome”导入FontAwesome；
从“反应路由器”导入{Link}；
从“/filterActions”导入{filter_names}；
从“lodash”进口；
导出默认类fuel.Component{
建造师（道具）{
超级（道具）；
此.state={
值：{}
};
this.handleFuel=this.handleFuel.bind（this）；
this.isChecked=this.isChecked.bind（this）；
}
handleFuel（名称、事件）{
让复选框=event.target.checked；
让nValues=\ u0.clone（this.state.values）；
nValues.type=名称；
nValues.active=复选框；
this.setState（{values:nValues}）；
}
已检查（名称）{
const{values}=this.state；
让我检查一下；
const checkbox=values.find（（c）=>c.name==name）；
如果（复选框）isChecked=checkbox.active；
返回检查；
} 
render（）{
const{values}=this.state；
const{language，allCarsInTheList}=this.props；
返回(
{语言.燃料}
{uq.uniq（allCarsInTheList.map（i=>i.fuel））.map（（name，i）=>(
this.handleFuel（名称、事件）}
选中={this.isChecked（name）}
/>
{name}
))}
);
}
}
列表中的所有cars是什么样子的
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>
        );
    }
}