英文:
How can i change translateX value when a button is clicked?
问题
Here's the translated part of your text:
"我是新手学习React。我想要在按钮被点击时，通过1170像素的量来改变translateX的值，但当我查看网站时，我不太明白在React中如何渲染onClick属性。
以下是代码：
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>
<div className="owl-controls clickable">
<div className="owl-buttons">
<div
className="sangtrai owl-prev"
onClick={getTranslateX}
></div>
<div className="sangphai owl-next"></div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default Slideshow;
```"
Is there anything else you need assistance with?
<details>
<summary>英文:</summary>
I'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't get how the onClick attribute is rendered in reactjs.
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>
<div className="owl-controls clickable">
<div className="owl-buttons">
<div
className="sangtrai owl-prev"
onClick={getTranslateX}
></div>
<div className="sangphai owl-next"></div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default Slideshow;
The thing in here is when i click **.sangtrai**, the translateX value in **.owl-wrapper's transform** will be added by amount of **1170px** and when i click **.sangphai**, the translateX value in **.owl-wrapper's transform** will be reduced by amount of **1170px**
</details>
# 答案1
**得分**: 0
我只能建议你拆分这个功能，并创建单独的函数来处理它。另外，稍微加入一些状态管理可能也会有所帮助。
为维护 x 值添加状态和单独的函数：
```javascript
const [translateX, setTranslateX] = useState(0);
const handlePrevClick = () => {
setTranslateX(translateX + 1170);
};
const handleNextClick = () => {
setTranslateX(translateX - 1170);
};
然后更新具有 .slider-carousel 类的 div，以使用这个状态值：
<div className="owl-wrapper" style={{
width: 11700,
left: 0,
display: "block",
transition: `all 400ms ease 0s`,
transform: `translate3d(${translateX}px, 0, 0)`,
}}>
最后，在不同的事件上调用单独的函数：
<div className="sangtrai owl-prev" onClick={handlePrevClick}></div>
<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:
const [translateX, setTranslateX] = useState(0);
const handlePrevClick = () => {
setTranslateX(translateX + 1170);
};
const handleNextClick = () => {
setTranslateX(translateX - 1170);
};
Then update the div with .slider-carousel to use this state value:
<div className="owl-wrapper" style={{
width: 11700,
left: 0,
display: "block",
transition: `all 400ms ease 0s`,
transform: `translate3d(${translateX}px, 0, 0)`,
}}>
and finally call seperate functions on the seperate events:
<div className="sangtrai owl-prev" onClick={handlePrevClick}></div>
<div className="sangphai owl-next" onClick={handleNextClick}></div>
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!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论