React.js,希望仅在添加的项目上显示动画”添加到购物袋”按钮。

huangapple go评论79阅读模式
英文:

React js , wanted to show the animation only on the added item "add to bag ' button

问题

我想只在“添加到购物袋”按钮上显示动画,但当我单击“添加到购物袋”按钮时,所有其他按钮React.js,希望仅在添加的项目上显示动画”添加到购物袋”按钮。也显示动画,但我只想在单击的按钮上显示按钮动画。有人可以帮助我吗?

{/* 开始代码片段:js 隐藏:false 控制台:true Babel:false */}
{/* 语言:lang-js */}
<Table responsive>
  <thead>
    <tr>
      <th>
        <p
          className="p-2"
          style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
        >
          SM
        </p>
      </th>
      {attributelist.map((attribute) => (
        <th key={variation.Name}>
          <p
            className="ml=5 p-2"
            style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
          >
            {attribute.Name}
          </p>
        </th>
      ))}
      <th>
        <p
          className="ml=5 p-2"
          style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
        >
          Price
        </p>
      </th>
      <th className="text-center" />
    </tr>
  </thead>
  {variation.map((variations) => (
    <tbody key={variations.ID}>
      <tr>
        <td className="text-dark">{variations.VariationSKU}</td>
        {variations.Attributes.map((attribute) => (
          <td key={attribute.ID} className="text-dark">
            {attribute.Value}
          </td>
        ))}
        <td className="text-dark">
          {`RM${variations.Price.toFixed(2)}`}
        </td>
        <td>
          <Button
            id="Sproduct-btn"
            className={`btn add-to-cart w-100 ${
              addedId === variations.ID ? submitResponse.class : ""
            }`}
            data-toggle="tooltip"
            type="button"
            tag={!user ? Link : "a"}
            to={!user ? "/login" : ""}
            disabled={
              submitResponse.openState ||
              Status === "Inactive" ||
              variationStatus === "Inactive" ||
              Stock === 0 ||
              variationStock === 0
            }
            style={{ fontSize: "15px", width: "30%" }}
            {...(user && {
              onClick: () =>
                onSubmit(
                  setAddedId(variations.ID),
                  setResponse(addToCart(productid, variations.ID))
                ),
            })}
          >
            <div className="cart">
              <div>
                <div />
                <div />
              </div>
            </div>
            <div className="dots" />
            {/* {variationStock === 0 || data.data.Stock === 0 ? (
              <div className="pl-2 default">SOLD OUT</div>
            ) : (
              <span className="pl-2 default">ADD TO BAG</span>
            )} */}
            <span className="pl-2 default">{result}</span>
            <div className="success">ADDED</div>
            <div className="failed">
              FAILED TO ADDED, PLEASE TRY AGAIN
            </div>
          </Button>
        </td>
      </tr>
    </tbody>
  ))}
</Table>
{/* 结束代码片段 */}

上面是表格中的按钮代码。

{/* 开始代码片段:js 隐藏:false 控制台:true Babel:false */}
{/* 语言:lang-js */}
const [submitResponse, setSubmitResponse] = useState({
  class: "",
  openState: false,
});
const [response, setResponse] = useState();
const [addedId, setAddedId] = useState();

const onSubmit = () => {
  response
    .then(() => {
      // 如果成功添加到购物车,则处理成功动画
      setSubmitResponse({
        class: "added",
        openState: true,
      });
      setTimeout(() => {
        setSubmitResponse({
          class: "added txtState",
          openState: true,
        });
      }, 10);
      setTimeout(() => {
        setSubmitResponse({
          class: "added",
          openState: true,
        });
      }, 3000);
      // 3.5秒后恢复正常
      setTimeout(() => {
        setSubmitResponse({
          class: "",
          openState: false,
        });
      }, 3500);
    })

    .catch(() => {
      // 如果添加到购物车失败,则处理危险动画
      setSubmitResponse({
        class: "danger",
        openState: true,
      });
      setTimeout(() => {
        setSubmitResponse({
          class: "danger txtState",
          openState: true,
        });
      }, 10);
      setTimeout(() => {
        setSubmitResponse({
          class: "danger",
          openState: true,
        });
      }, 3000);

      // 3.5秒后恢复正常
      setTimeout(() => {
        setSubmitResponse({
          class: "",
          openState: false,
        });
      }, 3500);
    });
};
{/* 结束代码片段 */}

上面是处理项目添加后显示动画的onSubmit函数。

英文:

I wanted to only show the animation in the "add to bag button only added item, but when I click the add to bag button all the other buttonsReact.js,希望仅在添加的项目上显示动画”添加到购物袋”按钮。 also display the animation but I wanted to just display the button animation only on the clicked button. Can anyone help me?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

&lt;Table responsive&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;
&lt;p
className=&quot;p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
SM
&lt;/p&gt;
&lt;/th&gt;
{attributelist.map((attribute) =&gt; (
&lt;th key={variation.Name}&gt;
&lt;p
className=&quot;ml=5 p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
{attribute.Name}
&lt;/p&gt;
&lt;/th&gt;
))}
&lt;th&gt;
&lt;p
className=&quot;ml=5 p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
Price
&lt;/p&gt;
&lt;/th&gt;
&lt;th className=&quot;text-center&quot; /&gt;
&lt;/tr&gt;
&lt;/thead&gt;
{variation.map((variations) =&gt; (
&lt;tbody key={variations.ID}&gt;
&lt;tr&gt;
&lt;td className=&quot;text-dark&quot;&gt;{variations.VariationSKU}&lt;/td&gt;
{variations.Attributes.map((attribute) =&gt; (
&lt;td key={attribute.ID} className=&quot;text-dark&quot;&gt;
{attribute.Value}
&lt;/td&gt;
))}
&lt;td className=&quot;text-dark&quot;&gt;
{`RM${variations.Price.toFixed(2)}`}
&lt;/td&gt;
&lt;td&gt;
&lt;Button
id=&quot;Sproduct-btn&quot;
className={`btn add-to-cart w-100 ${
addedId === variations.ID ? submitResponse.class : &quot;&quot;
}`}
data-toggle=&quot;tooltip&quot;
type=&quot;button&quot;
tag={!user ? Link : &quot;a&quot;}
to={!user ? &quot;/login&quot; : &quot;&quot;}
disabled={
submitResponse.openState ||
Status === &quot;Inactive&quot; ||
variationStatus === &quot;Inactive&quot; ||
Stock === 0 ||
variationStock === 0
}
style={{ fontSize: &quot;15px&quot;, width: &quot;30%&quot; }}
{...(user &amp;&amp; {
onClick: () =&gt;
onSubmit(
setAddedId(variations.ID),
setResponse(addToCart(productid, variations.ID))
),
})}
&gt;
&lt;div className=&quot;cart&quot;&gt;
&lt;div&gt;
&lt;div /&gt;
&lt;div /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div className=&quot;dots&quot; /&gt;
{/* {variationStock === 0 || data.data.Stock === 0 ? (
&lt;div className=&quot;pl-2 default&quot;&gt;SOLD OUT&lt;/div&gt;
) : (
&lt;span className=&quot;pl-2 default&quot;&gt;ADD TO BAG&lt;/span&gt;
)} */}
&lt;span className=&quot;pl-2 default&quot;&gt;{result}&lt;/span&gt;
&lt;div className=&quot;success&quot;&gt;ADDED&lt;/div&gt;
&lt;div className=&quot;failed&quot;&gt;
FAILED TO ADDED, PLEASE TRY AGAIN
&lt;/div&gt;
&lt;/Button&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
))}
&lt;/Table&gt;

<!-- end snippet -->

above is my button code in the table

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 const [submitResponse, setSubmitResponse] = useState({
class: &quot;&quot;,
openState: false,
});
const [response, setResponse] = useState();
const [addedId, setAddedId] = useState();
const onSubmit = () =&gt; {
response
.then(() =&gt; {
// if success add to cart, process success animation
setSubmitResponse({
class: &quot;added&quot;,
openState: true,
});
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;added txtState&quot;,
openState: true,
});
}, 10);
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;added&quot;,
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;&quot;,
openState: false,
});
}, 3500);
})
.catch(() =&gt; {
// if failed add to cart, process danger animation
setSubmitResponse({
class: &quot;danger&quot;,
openState: true,
});
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;danger txtState&quot;,
openState: true,
});
}, 10);
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;danger&quot;,
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;&quot;,
openState: false,
});
}, 3500);
});
};

<!-- end snippet -->

above is my onSubmit ,function for animation display after item added

答案1

得分: 0

你为所有地图上的按钮设置了动画类:

className={`btn add-to-cart w-100 ${submitResponse.class}`}

你需要使用条件语句来检查哪个按钮被点击。例如,你可以定义一个状态并设置它为添加的变体ID。

className={'btn add-to-cart w-100 ' + ((addedId === variations.ID) ? (submitResponse.class) : '')}

新的更新:

我为你有另一个想法:

<Table responsive>
  <thead>
    <tr>
      <th>
        <p className="p-2" style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}>
          SM
        </p>
      </th>
      {attributelist.map((attribute) => (
        <th key={variation.Name}>
          <p className="ml=5 p-2" style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}>
            {attribute.Name}
          </p>
        </th>
      )}
      <th>
        <p className="ml=5 p-2" style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}>
          Price
        </p>
      </th>
      <th className="text-center" />
    </tr>
  </thead>
  <tbody>
    {variation.map((variations) => (
      <TableRow variation={variations} />
    )}
  </tbody>
</Table>

并将变体传递给每个TableRow组件:

function TableRow({variation}) {
  // 这里是组件的具体内容,包括状态、事件处理和UI元素
}
英文:

you set animation class to all button's in map :

className={`btn add-to-cart w-100 ${submitResponse.class}`}

you need use conditional statement to check which Button clicked. for example, you can define a state and set it added variations.ID.

className={&#39;btn add-to-cart w-100 &#39;+((addedId===variations.ID)?(submitResponse.class):&#39;&#39;)}

New Update :

I have another idea for you :

> it's may need to change with you:

I change your table component :

&lt;Table responsive&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;
&lt;p
className=&quot;p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
SM
&lt;/p&gt;
&lt;/th&gt;
{attributelist.map((attribute) =&gt; (
&lt;th key={variation.Name}&gt;
&lt;p
className=&quot;ml=5 p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
{attribute.Name}
&lt;/p&gt;
&lt;/th&gt;
))}
&lt;th&gt;
&lt;p
className=&quot;ml=5 p-2&quot;
style={{ backgroundColor: &quot;#F5F0E5&quot;, fontSize: &quot;20px&quot; }}
&gt;
Price
&lt;/p&gt;
&lt;/th&gt;
&lt;th className=&quot;text-center&quot; /&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
{variation.map((variations) =&gt; (
&lt;TableRow variation={variations} /&gt;
))}
&lt;/tbody&gt;
&lt;/Table&gt;

And pass variation to each TableRow Component :

function TableRow({variation}) {
const [submitResponse, setSubmitResponse] = useState({
class: &quot;&quot;,
openState: false,
});
const [response, setResponse] = useState();
const onSubmit = () =&gt; {
response
.then(() =&gt; {
// if success add to cart, process success animation
setSubmitResponse({
class: &quot;added&quot;,
openState: true,
});
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;added txtState&quot;,
openState: true,
});
}, 10);
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;added&quot;,
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;&quot;,
openState: false,
});
}, 3500);
})
.catch(() =&gt; {
// if failed add to cart, process danger animation
setSubmitResponse({
class: &quot;danger&quot;,
openState: true,
});
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;danger txtState&quot;,
openState: true,
});
}, 10);
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;danger&quot;,
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() =&gt; {
setSubmitResponse({
class: &quot;&quot;,
openState: false,
});
}, 3500);
});
};
return (&lt;tr key={variations.ID}&gt;
&lt;td className=&quot;text-dark&quot;&gt;{variations.VariationSKU}&lt;/td&gt;
{variations.Attributes.map((attribute) =&gt; (
&lt;td key={attribute.ID} className=&quot;text-dark&quot;&gt;
{attribute.Value}
&lt;/td&gt;
))}
&lt;td className=&quot;text-dark&quot;&gt;
{`RM${variations.Price.toFixed(2)}`}
&lt;/td&gt;
&lt;td&gt;
&lt;Button
id=&quot;Sproduct-btn&quot;
className={`btn add-to-cart w-100 ${ submitResponse.class }`}
data-toggle=&quot;tooltip&quot;
type=&quot;button&quot;
tag={!user ? Link : &quot;a&quot;}
to={!user ? &quot;/login&quot; : &quot;&quot;}
disabled={
submitResponse.openState ||
Status === &quot;Inactive&quot; ||
variationStatus === &quot;Inactive&quot; ||
Stock === 0 ||
variationStock === 0
}
style={{ fontSize: &quot;15px&quot;, width: &quot;30%&quot; }}
{...(user &amp;&amp; {
onClick: () =&gt;
onSubmit(
setResponse(addToCart(productid, variations.ID))
),
})}
&gt;
&lt;div className=&quot;cart&quot;&gt;
&lt;div&gt;
&lt;div /&gt;
&lt;div /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div className=&quot;dots&quot; /&gt;
{/* {variationStock === 0 || data.data.Stock === 0 ? (
&lt;div className=&quot;pl-2 default&quot;&gt;SOLD OUT&lt;/div&gt;
) : (
&lt;span className=&quot;pl-2 default&quot;&gt;ADD TO BAG&lt;/span&gt;
)} */}
&lt;span className=&quot;pl-2 default&quot;&gt;{result}&lt;/span&gt;
&lt;div className=&quot;success&quot;&gt;ADDED&lt;/div&gt;
&lt;div className=&quot;failed&quot;&gt;
FAILED TO ADDED, PLEASE TRY AGAIN
&lt;/div&gt;
&lt;/Button&gt;
&lt;/td&gt;
&lt;/tr&gt;)
}

huangapple
  • 本文由 发表于 2023年2月10日 11:48:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75406744.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定