react.js按钮的活动类

Question

我对活动按钮有问题。在Stackoverflow上找不到解决方案。

我有一家商店，并且有用于选择产品特征的按钮。目前，我设法将一个值保存在该州，但是如果属性类别相同，则启用了两个产品的活动按钮。

• 感谢您的帮助！

app.js

class App extends Component {
  Data;
  constructor(props) {
    super(props);
    this.state = {
      activeName: null,
      activeColor: null
    };
    this.handleAttribute = this.handleAttribute.bind(this);
    this.colorAttribute = this.colorAttribute.bind(this);
}
handleAttribute(e) {
    e.preventDefault();
    this.setState({activeName: e.currentTarget.id });
  }
  colorAttribute(e) {
    e.preventDefault();
    this.setState({activeColor: e.currentTarget.id });
  }

cart.js

     <div className={s.attributesContainer}>{products.attributes.map((attributes) => {
                      
                      return (
                        <div>
                          <div key={attributes.id} className={s.attributesName} >{attributes.id}:</div>
                          {attributes.items.map((itemss) => {
                            return ( 
                              <div 
                               className={s.attributesButton}>
                                <div className={attributes.type === "text" ? (itemss.id === this.props.activeName?s.itemsAttrributesActive:s.itemsAttrributes): (itemss.id ===this.props.activeColor?s.itemsAttrributesColorActive:s.itemsAttrributesColor)} style={{ background: itemss.value }}
                                onClick={attributes.id?attributes.type=== "text"? e => this.props.handleAttribute(e) : e =>this.props.colorAttribute(e):null} id={itemss.id}>
                              {console.log(this.props.activeName)}
                                  <button className={attributes.type === "text" ?(itemss.id === this.props.activeName?s.buttonInfoActive:s.buttonInfo):s.buttonInfo} >
                                    {attributes.id != "Color" ? itemss.displayValue : null}
                                  </button>
                                </div>
                                
                              </div>
                              )
                          })}
                        </div>
                      )
                    })}</div>
                  </div>
                </div>
                : null))))}

Answer 1

我认为那是因为您的身份证不是唯一的。如果您使用唯一的ID，则应按预期工作。如果我认为您正在通过产品循环，那么使用索引可以提供帮助。您可以在下面参考我使用产品索引和属性索引来创建唯一ID的 $ {PRODUCTSINDEX} - $ {attributeIndex} - $ {pockts.id}

<div>
  {
    data.category.products.map((products, productsIndex) => {
      return <div className={s.attributesContainer}>
        {products.attributes.map((attributes, attributeIndex) => {
          return (
            <div>
              <div key={attributes.id} className={s.attributesName} >{attributes.id}:</div>
              {attributes.items.map((itemss) => {
                return (
                  <div className={s.attributesButton}>
                    <div className={attributes.type === "text" ? (`${productsIndex}-${attributeIndex}-${itemss.id}` === this.props.activeName ? s.itemsAttrributesActive : s.itemsAttrributes) : (`${productsIndex}-${attributeIndex}-${itemss.id}` === this.props.activeColor ? s.itemsAttrributesColorActive : s.itemsAttrributesColor)} style={{ background: itemss.value }}
                      onClick={attributes.id ? attributes.type === "text" ? e => this.props.handleAttribute(e) : e => this.props.colorAttribute(e) : null} id={`${productsIndex}-${attributeIndex}-${itemss.id}`}>
                      {console.log(this.props.activeName)}
                      <button className={attributes.type === "text" ? (`${productsIndex}-${attributeIndex}-${itemss.id}` === this.props.activeName ? s.buttonInfoActive : s.buttonInfo) : s.buttonInfo} >
                        {attributes.id != "Color" ? itemss.displayValue : null}
                      </button>
                    </div>
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
    })
  }
</div>