Question

给定：

function App() {
    var xPos = 0;
    const [style, setStyle] = React.useState({transform: `translateX(${xPos}px)`});
  
    const onClick =(direction) => {
       (direction === "left") ? xPos -= 100 : xPos += 100;
       setStyle({transform: `translateX(${xPos}px)`});
           console.log(xPos)
        }

    return (
          <div className="main_container">
             <button className="left_button" onClick={() => onClick("left")}>slide left</button>
             <div className="forecast_slider" >
                <div className="forecast_container" style={style} > 
                   {forecastBuilder()}
                </div>
             </div>
             <button className="right_button" onClick={() => onClick("right")}>slide right</button>
          </div>
       )
   }

const forecastBuilder = () => {
const cell = [];
  for(var i = 1 ; i < 8 ; i++){
    cell.push(
        <div className={i}>
        {i}
        <img src="https://imgs.michaels.com/MAM/assets/1/5E3C12034D34434F8A9BAAFDDF0F8E1B/img/0E9397ED92304202B4A25D7387A74515/M10118706_2.jpg" width="100" height="80" border="1px solid black" />
        <br></br>
        <span>day {i}</span>
      </div>
    )
  }
  return cell;
}


ReactDOM.render(<App />, document.querySelector("#app"));

.main_container {
  display:flex;
}
.forecast_container { 
    display: flex;
    width: 510px;
    height: 130px;
    
    margin-left: auto;
    margin-right: auto;

    align-items: center;
    text-align: center;
    
    transition: transform 250ms;
  }
  .forecast_slider {
    background-color: black;
    color: white;
  
     overflow:hidden;
    float:right;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="app"></div>

使用 JSFiddle link here ,

我想让 translateX() 动画在点击相应按钮时递增和递减。目前，我怀疑当我调用 setStyle() 钩子时，组件会被重新渲染，使得行

var xPos=0;

再次读取。我无法找到以其他方式递增或递减的方法（没有事先分配 0 的值，以便第一次渲染时 style = {style} 忽略该参数）。

有人知道我如何解决这个问题吗？

Answer 1

问题是 xPos 的值将在每次渲染时设置为 0，因此您不会保存它的新值，它会在每次渲染时重置。

您也应该将 xPos 存储在状态中。

const [xPos, setXpos] = useState(0)

然后在函数本身中递增/递减：

    const onClick = (direction) => {
    (direction === "left") ? setXpos(x => x - 100) : setXpos(x => x + 100)
}

这应该有效

ReactJs 在按钮单击时增加 translateX()

1 个答案: