保存按钮 onClick 的状态

Question

我有：

<blink>

  const [thisButtomSelected, setThisButtomSelected] = useState(false);
  var thisButton = [];

  const onAttributeClick = (e) => {
    thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e.currentTarget.name }
    setThisButtomSelected(thisButton[e.currentTarget.value]);
  }
  return(
    <div>
      {data.item.attributes.map((attribute, index) => (
        <div key={index} >
          <p id={attribute.id}>{attribute.name}:</p>

          <ul className="choose-attribute-container-ul">
            {attribute.items.map((item) => (

              <li key={item.id}>
                <button
                  value={item.value}
                  id={item.id}
                  name={attribute.name}
                  className={_.isEqual(thisButtomSelected, { thisID: item.id, thisName: attribute.name }) ? 'attribute-button-selected' : 'attribute-button'}
                  onClick={onAttributeClick}
                >
                  {item.displayValue}
                </button>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )

</blink>

此模式工作正常，但每当页面上的属性多于 1 个且用户 select 多于一个时，之前 selected 的按钮将被取消点击。
我的问题是：如何在点击第二个按钮后保存第一个 selected 按钮的状态？

每个属性只能激活一个按钮
应使用按钮名称

Answer 1

您应该将按钮保存在一个数组中以保留所有按钮，例如：

  const [thisButtomSelected, setThisButtomSelected] = useState([]);

  var thisButton = [];
  
  const onAttributeClick = (e) => {
      thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e.currentTarget.name }
  
      setThisButtomSelected([...thisButtomSelected, thisButton[e.currentTarget.value]]);
  
  }
  return(
              <div>
                  {data.product.attributes.map((attribute, index) => (
                      <div key={index} >
                          <p id={attribute.id}>{attribute.name}:</p>
  
                          <ul className="choose-attribute-container-ul">
                              {attribute.items.map((item) => (
  
                                  <li key={item.id}>
                                      <button
                                          value={item.value}
                                          id={item.id}
                                          name={attribute.name}
                                          className={thisButtomSelected.find(el => el.thisID === item.id && el.thisName === attribute.name) ? 'attribute-button-selected' : 'attribute-button'}
                                          onClick={onAttributeClick}
                                      >

保存按钮 onClick 的状态

Saving the state of the button onClick

javascript

reactjs

graphql

apollo-client