将几个参数传递给react组件

亲爱的蜜蜂

我正在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);
}

但是当我尝试时,一切都陷入循环,每次都几乎崩溃了……

感谢对此的任何帮助。

拉尔斯·格劳伯纳(Lars Graubner)

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

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;

我没有对此进行测试,但这应该可以解决您的项目。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将参数传递给React组件

来自分类Dev

将URL参数传递给React.js根组件

来自分类Dev

在React Native中将参数传递给组件

来自分类Dev

将参数传递给Blazor组件

来自分类Dev

将参数传递给功能组件

来自分类Dev

将参数传递给几个AngularJS指令实例?

来自分类Dev

如何将很多参数传递给几个函数

来自分类Dev

将参数传递给几个AngularJS指令实例?

来自分类Dev

React:将功能传递给子组件

来自分类Dev

将React Route传递给子组件

来自分类Dev

将函数传递给React中的组件

来自分类Dev

React js将props传递给组件

来自分类Dev

将React Hook传递给功能组件

来自分类Dev

将 Redux 状态传递给 React 组件

来自分类Dev

React 将事件传递给子组件

来自分类Dev

如何将单个参数传递给返回组件的React函数?

来自分类Dev

如何将参数传递给 React 函数组件中的函数

来自分类Dev

将一个React组件作为参数传递给另一个React组件

来自分类Dev

React Router-将所选组件传递给父组件

来自分类Dev

如何将参数传递给余烬组件

来自分类Dev

将参数传递给Ionic 2中的组件

来自分类Dev

如何将参数传递给表组件?

来自分类Dev

将参数传递给自定义组件

来自分类Dev

使用指令将参数传递给子组件angular

来自分类Dev

如何将参数传递给组件查询(非静态)?

来自分类Dev

将参数传递给Angular组件中的getter的替代方法

来自分类Dev

如何通过语义ui将参数传递给Dropdown组件?

来自分类Dev

如何将参数传递给Vue组件?

来自分类Dev

如何将参数传递给Camel中的myBatis组件?