我正在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);
}
但是当我尝试时,一切都陷入循环,每次都几乎崩溃了……
感谢对此的任何帮助。
我建议仅使用一个处理程序函数并使用绑定生成链接。
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] 删除。
我来说两句