当单击按钮时，如何更改translateX的值？

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

How can i change translateX value when a button is clicked?

问题

Here's the translated part of your text:

"我是新手学习React。我想要在按钮被点击时，通过1170像素的量来改变translateX的值，但当我查看网站时，我不太明白在React中如何渲染onClick属性。

以下是代码：

  1. function Slideshow() {
  2.   const slider = [
  3.     { name: slide_logo_1, link: "https://timesrecords.lnk.to/CITOPIA" },
  4.     {
  5.       name: slide_logo_2,
  6.       link: "https://store.hangdiathoidai.com/search?q=lana+del+rey",
  7.     },
  8.     { name: slide_logo_3, link: "https://timesrecords.lnk.to/TocTien-Cong" },
  9.     { name: slide_logo_4, link: "https://timesrecords.lnk.to/TSMidnights" },
  10.     { name: slide_logo_5, link: "https://timesrecords.lnk.to/LINK-HTL" },
  11.   ];
  12.   const getTranslateX = () => {
  13.     var myElement = document.querySelector(".owl-wrapper");
  14.     var style = window.getComputedStyle(myElement);
  15.     var matrix = new DOMMatrix(style.transform);
  16.     <Alert>{matrix}</Alert>;
  17.     
  18.   };
  20.   return (
  21.     <section>
  22.       <div className="wrapper">
  23.         <div className="inner space-30 section-slider">
  24.           <div
  25.             className="slider-carousel owl-carousel owl-theme"
  26.             id="slider-carousel"
  27.             data-mobile="[479,1]"
  28.             data-tabletsmall="[768,1]"
  29.             data-desktopsmall="[979,1]"
  30.             data-desktop="[1199,1]"
  31.             data-pagination="false"
  32.             data-navigation="true"
  33.             data-autoplay="5000"
  34.             data-items="1"
  35.             style={{ display: "block", opacity: 1 }}
  36.           >
  37.             <div
  38.               className="owl-wrapper-outer autoHeight"
  39.               style={{ height: 431 }}
  40.             >
  41.               <div
  42.                 className="owl-wrapper"
  43.                 style={{
  44.                   width: 11700,
  45.                   left: 0,
  46.                   display: "block",
  47.                   transition: `all 400ms ease 0s`,
  48.                   transform: `translate3d(0px, 0, 0)`,
  49.                 }}
  50.               >
  51.                 {slider.map((products, index) => {
  52.                   return (
  53.                     <div className="owl-item" style={{ width: 1170 }}>
  54.                       <div className="text-center">
  55.                         <Link
  56.                           className="slide"
  57.                           to={products.link}
  58.                           title=""
  59.                           key={index}
  60.                         >
  61.                           <img src={products.name} alt="" />
  62.                         </Link>
  63.                       </div>
  64.                     </div>
  65.                   );
  66.                 })}
  67.               </div>
  68.             </div>
  70.             <div className="owl-controls clickable">
  71.               <div className="owl-buttons">
  72.                 <div
  73.                   className="sangtrai owl-prev"
  74.                   onClick={getTranslateX}
  75.                 ></div>
  76.                 <div className="sangphai owl-next"></div>
  77.               </div>
  78.             </div>
  79.           </div>
  80.         </div>
  81.       </div>
  82.     </section>
  83.   );
  84. }
  86. export default Slideshow;
  87. ```"
  89. Is there anything else you need assistance with?
  91. <details>
  92. <summary>英文:</summary>
  94. I&#39;m new to react. I wanna make my button change the translateX value when it is clicked by amount of 1170px, but when i checked the site i quite don&#39;t get how the onClick attribute is rendered in reactjs.
  96. Here is the code:

function Slideshow() {
const slider = [
{ name: slide_logo_1, link: "https://timesrecords.lnk.to/CITOPIA" },
{
name: slide_logo_2,
link: "https://store.hangdiathoidai.com/search?q=lana+del+rey",
},
{ name: slide_logo_3, link: "https://timesrecords.lnk.to/TocTien-Cong" },
{ name: slide_logo_4, link: "https://timesrecords.lnk.to/TSMidnights" },
{ name: slide_logo_5, link: "https://timesrecords.lnk.to/LINK-HTL" },
];
const getTranslateX = () => {
var myElement = document.querySelector(".owl-wrapper");
var style = window.getComputedStyle(myElement);
var matrix = new DOMMatrix(style.transform);
<Alert>{matrix}</Alert>

};

return (
<section>
<div className="wrapper">
<div className="inner space-30 section-slider">
<div
className="slider-carousel owl-carousel owl-theme"
id="slider-carousel"
data-mobile="[479,1]"
data-tabletsmall="[768,1]"
data-desktopsmall="[979,1]"
data-desktop="[1199,1]"
data-pagination="false"
data-navigation="true"
data-autoplay="5000"
data-items="1"
style={{ display: "block", opacity: 1 }}
>
<div
className="owl-wrapper-outer autoHeight"
style={{ height: 431 }}
>
<div
className="owl-wrapper"
style={{
width: 11700,
left: 0,
display: "block",
transition: all 400ms ease 0s,
transform: translate3d(0px, 0, 0),
}}
>
{slider.map((products, index) => {
return (
<div className="owl-item" style={{ width: 1170 }}>
<div className="text-center">
<Link
className="slide"
to={products.link}
title=""
key={index}
>
<img src={products.name} alt="" />
</Link>
</div>
</div>
);
})}
</div>
</div>

  1.         &lt;div className=&quot;owl-controls clickable&quot;&gt;
  2. &lt;div className=&quot;owl-buttons&quot;&gt;
  3. &lt;div
  4. className=&quot;sangtrai owl-prev&quot;
  5. onClick={getTranslateX}
  6. &gt;&lt;/div&gt;
  7. &lt;div className=&quot;sangphai owl-next&quot;&gt;&lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;/section&gt;

);
}

export default Slideshow;

  1. The thing in here is when i click **.sangtrai**, the translateX value in **.owl-wrapper&#39;s transform** will be added by amount of **1170px** and when i click **.sangphai**, the translateX value in **.owl-wrapper&#39;s transform** will be reduced by amount of **1170px**
  2. </details>
  3. # 答案1
  4. **得分**: 0
  5. 我只能建议你拆分这个功能，并创建单独的函数来处理它。另外，稍微加入一些状态管理可能也会有所帮助。
  6. 为维护 x 值添加状态和单独的函数：
  7. ```javascript
  8. const [translateX, setTranslateX] = useState(0);
  9. const handlePrevClick = () => {
  10. setTranslateX(translateX + 1170);
  11. };
  12. const handleNextClick = () => {
  13. setTranslateX(translateX - 1170);
  14. };

然后更新具有 .slider-carousel 类的 div，以使用这个状态值：

  1. <div className="owl-wrapper" style={{
  2.   width: 11700,
  3.   left: 0,
  4.   display: "block",
  5.   transition: `all 400ms ease 0s`,
  6.   transform: `translate3d(${translateX}px, 0, 0)`,
  7. }}>

最后，在不同的事件上调用单独的函数：

  1. <div className="sangtrai owl-prev" onClick={handlePrevClick}></div>
  2. <div className="sangphai owl-next" onClick={handleNextClick}></div>

注意: 我没有测试上面的代码，但如果它不能如预期般工作，这可能是一个可以帮到你的方法。祝好运！

英文:

I can only recommend that you split this functionality and create separate functions for this. Also a touch of state management may help here as well.

Add state and separate functions for maintaining the x value:

  1.   const [translateX, setTranslateX] = useState(0);
  2. const handlePrevClick = () =&gt; {
  3. setTranslateX(translateX + 1170);
  4. };
  5. const handleNextClick = () =&gt; {
  6. setTranslateX(translateX - 1170);
  7. };

Then update the div with .slider-carousel to use this state value:

  1.   &lt;div className=&quot;owl-wrapper&quot; style={{
  2. width: 11700,
  3. left: 0,
  4. display: &quot;block&quot;,
  5. transition: `all 400ms ease 0s`,
  6. transform: `translate3d(${translateX}px, 0, 0)`,
  7. }}&gt;

and finally call seperate functions on the seperate events:

  1. &lt;div className=&quot;sangtrai owl-prev&quot; onClick={handlePrevClick}&gt;&lt;/div&gt;
  2. &lt;div className=&quot;sangphai owl-next&quot; onClick={handleNextClick}&gt;&lt;/div&gt;

Note: I haven't tested the code above but it may be an approach that can help if it doesn't work as expected. Cheers!

huangapple
  • 本文由 发表于 2023年5月25日 11:38:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76328767.html
  • html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

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

确定