将几个参数传递到react组件中

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

但当我尝试的时候，每件事都会陷入循环，每次都会有很大的裂痕……

感谢你在这方面的任何帮助。

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