Question

我在React工作，我正在尝试将几个参数（不同大小）传递给一个方法。

我使用硬编码标签和类名硬编码了8种尺寸并且可以使用，但它不适用于网站，因为尺寸选项会根据已经过滤的其他选项而改变。

我需要使用更通用的函数和循环来使一切更通用。

REACT：

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

我试图通过丢失的代码来实现神圣，但我相信最后一行应该是：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]});
}

Answer 2

我建议只使用一个处理函数并使用绑定生成链接。

temp = LOAD '/user/training/test/{$input}' USING SomeLoader() AS (...);

我没有对此进行测试，但这应该可以修复您的项目。

将几个参数传递给反应组件

2 个答案: