將幾個參數傳遞給反應組件

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