Передача нескольких аргументов в компонент реакции

Question

Я работаю в режиме React, и я пытаюсь передать несколько аргументов (разных размеров) одному методу.

У меня есть жесткие 8 размеров с жестко закодированными ярлыками и именами классов, и это работает, но оно не будет работать на сайте, поскольку параметры размера будут меняться в зависимости от того, какие другие параметры уже были отфильтрованы.

Мне нужно сделать все более общим с более универсальными функциями и петлями.

ВЗАИМОДЕЙСТВУЕТ:

import React, { Component, PropTypes } from 'react'; 

class Sizes extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     XXS: false, 
     XS: false, 
     S: false, 
     SM: false, 
     M: false, 
     L: false, 
     XL: false, 
     XXL: false, 
    }; 

    this.toggleOnOffXXS = this.toggleOnOffXXS.bind(this); 
    this.toggleOnOffXS = this.toggleOnOffXS.bind(this); 
    this.toggleOnOffS = this.toggleOnOffS.bind(this); 
    this.toggleOnOffSM = this.toggleOnOffSM.bind(this); 
    this.toggleOnOffM = this.toggleOnOffM.bind(this); 
    this.toggleOnOffL = this.toggleOnOffL.bind(this); 
    this.toggleOnOffXL = this.toggleOnOffXL.bind(this); 
    this.toggleOnOffXXL = this.toggleOnOffXXL.bind(this); 
    } 

    toggleOnOffXXS() { 
    this.setState({ 
     XXS: !this.state.XXS 
    }); 
    } 

    toggleOnOffXS() { 
    this.setState({ 
     XS: !this.state.XS 
    }); 
    } 

    toggleOnOffS() { 
    this.setState({ 
     S: !this.state.S 
    }); 
    } 

    toggleOnOffSM() { 
    this.setState({ 
     SM: !this.state.SM 
    }); 
    } 

    toggleOnOffM() { 
    this.setState({ 
     M: !this.state.M 
    }); 
    } 

    toggleOnOffL() { 
    this.setState({ 
     L: !this.state.L 
    }); 
    } 

    toggleOnOffXL() { 
    this.setState({ 
     XL: !this.state.XL 
    }); 
    } 

    toggleOnOffXXL() { 
    this.setState({ 
     XXL: !this.state.XXL 
    }); 
    } 

    render() { 
    let XXS = this.state.XXS ? 'on' : '' ; 
    XXS += ' filter-filterSize-XXS' ; 

    let XS = this.state.XS ? 'on' : '' ; 
    XS += ' filter-filterSize-XS' ; 

    let S = this.state.S ? 'on' : '' ; 
    S += ' filter-filterSize-S' ; 

    let SM = this.state.SM ? 'on' : '' ; 
    SM += ' filter-filterSize-SM' ; 

    let M = this.state.M ? 'on' : '' ; 
    M += ' filter-filterSize-M' ; 

    let L = this.state.L ? 'on' : '' ; 
    L += ' filter-filterSize-L' ; 

    let XL = this.state.XL ? 'on' : '' ; 
    XL += ' filter-filterSize-XL' ; 

    let XXL = this.state.XXL ? 'on' : '' ; 
    XXL += ' filter-filterSize-XXL' ; 

    return (
     <div 
      className='filter-filterSize-buttons' 
     > 
      <a 
       className={ XXS } 
       href='#' 
       onClick={ this.toggleOnOffXXS } 
      > 
       { 'xxs' } 
      </a> 
      <a 
       className={ XS } 
       href='#' 
       onClick={ this.toggleOnOffXS } 
      > 
       { 'xs' } 
      </a> 
      <a 
       className={ S } 
       href='#' 
       onClick={ this.toggleOnOffS } 
      > 
       { 's' } 
      </a> 
      <a 
       className={ SM } 
       href='#' 
       onClick={ this.toggleOnOffSM } 
      > 
       { 's-m' } 
      </a> 
      <a 
       className={ M } 
       href='#' 
       onClick={ this.toggleOnOffM } 
      > 
       { 'm' } 
      </a> 
      <a 
       className={ L } 
       href='#' 
       onClick={ this.toggleOnOffL } 
      > 
       { 'l' } 
      </a> 
      <a 
       className={ XL } 
       href='#' 
       onClick={ this.toggleOnOffXL } 
      > 
       { 'xl' } 
      </a> 
      <a 
       className={ XXL } 
       onClick={ this.toggleOnOffXXL } 
      > 
       { 'xxl' } 
      </a> 
     </div> 
    ); 
    } 
} 

export default Sizes; 

я предположил, что она должна быть написана таким образом:

toggleState(key) { 
    let state = {}; 

    state[key] = !this.state[key]; 

    this.setState(XXS); 
} 

Но когда я пытаюсь, все идет в петлю и в значительной степени craches каждый раз, когда ...

Цените любую помощь по этому вопросу.

Answer 1

я предлагаю использовать только один обработчик и генерировать свои связи с креплениями.

import React, { Component, PropTypes } from 'react'; 

class Sizes extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     XXS: false, 
     XS: false, 
     S: false, 
     SM: false, 
     M: false, 
     L: false, 
     XL: false, 
     XXL: false, 
    }; 

    this.sizes = ['XXS', 'XS', 'S', 'SM', 'M', 'L', 'XL', 'XXL']; 
    } 

    toggleOnOff(size) { 
    this.setState({ 
     [size]: !this.state.size 
    }); 
    } 

    render() { 
    let XXS = this.state.XXS ? 'on' : '' ; 
    XXS += ' filter-filterSize-XXS' ; 

    let XS = this.state.XS ? 'on' : '' ; 
    XS += ' filter-filterSize-XS' ; 

    let S = this.state.S ? 'on' : '' ; 
    S += ' filter-filterSize-S' ; 

    let SM = this.state.SM ? 'on' : '' ; 
    SM += ' filter-filterSize-SM' ; 

    let M = this.state.M ? 'on' : '' ; 
    M += ' filter-filterSize-M' ; 

    let L = this.state.L ? 'on' : '' ; 
    L += ' filter-filterSize-L' ; 

    let XL = this.state.XL ? 'on' : '' ; 
    XL += ' filter-filterSize-XL' ; 

    let XXL = this.state.XXL ? 'on' : '' ; 
    XXL += ' filter-filterSize-XXL' ; 

    return (
     <div 
      className='filter-filterSize-buttons' 
     > 
      { 
      this.sizes.map((size) => { 
       const toggleOnOff = this.toggleOnOff.bind(this, size); 
       return (
       <a href="#" className={[size]} onClick={toggleOnOff}>{size}</a> 
      ) 
      }) 
      } 
     </div> 
    ); 
    } 
} 

export default Sizes; 

Я не тестировал это, но это должно исправить ваш проект.

Answer 2

Я вроде пытаюсь угадывать через отсутствующий код, но я считаю, что последняя строка должна быть: this.setState(state);

toggleState(key) { 
    let state = {}; 

    state[key] = !this.state[key]; 

    this.setState(state); 
} 

// or, more simply: 
toggleState(key) { 
    this.setState({[key]: !this.state[key]}); 
}