Вопрос:

Получение состояния флажка в React JS

javascript reactjs

3848 просмотра

2 ответа

4440 Репутация автора

Мой код выглядит следующим образом:

 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"
    }
]
Автор: Boky Источник Размещён: 16.09.2016 09:08

Ответы (2)


0 плюса

978 Репутация автора

Вы случайно передаете в vобработчик кликов, а не событие. Чтобы помочь избежать путаницы, я бы добавил привязку в constructor.

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

Тогда ваш чекбокс тоже станет легче читать:

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

пс, должно checked={true}быть defaultChecked={true}?

Автор: peter.mouland Размещён: 16.09.2016 10:13

0 плюса

3691 Репутация автора

Привет @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>
        );
    }
}
Автор: Ilanus Размещён: 16.09.2016 10:14
Вопросы из категории :
32x32