javascript - React：如果运行另一个事件函数，变量将重置为默认值

Question

我在 React 中有以下代码：

let down = 0

const moveUp = e => {
//other code
let up = down - 300
}

const moveDown = e => {
//other code
down = down + 300
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>

Down 是用户点击的第一个按钮，它将down变量增加 300，所以假设我们向下增加了 3 次，即 900。

问题是，当我们尝试单击引用该函数的Up按钮时， down变量现在设置回默认值0，为什么会发生这种情况，不应该将更改为900存储在内存中吗？moveUp

我真的很想在这里得到一些帮助，显然我对 Javascript 事件和变量范围有些不了解。

标签： javascriptreactjsevent-handlingdom-events

Answer 1

尝试存储down为状态变量。您的组件可能会在某处重新渲染，导致down初始化回 0。

更新那将是

import React, { useState } from 'react'

const [down, setDown] = useState(0)

const moveUp = e => {
    //other code
    setDown(down - 300)
}

const moveDown = e => {
    //other code
    setDown(down + 300)
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>