当我尝试更改变量值时 onClick 不起作用

Question

在 React 中，我试图在单击某些按钮时更改 2 个元素的显示。我要么想要显示标题，要么想要编辑标题的输入。我的标题 div 有一个名为 'titleDisplay' 的变量的类名，其值为 'isDisplayed'。我设置了一个功能，可以将其切换为 'notDisplayed'

let titleDisplay = 'isDisplayed';
let editDisplay = 'notDisplayed';
const editDisplayed = () => {
        editDisplay = 'isDisplayed'
        titleDisplay = 'notDisplayed'
    }

<button onClick={editDisplayed} id="edit-btn">EDIT</button>

<div className={titleDisplay}>
   <h2 className='indieNotebookTitle'>{notebook?.title}</h2>
</div>

.isDisplayed {
    display: block;
}

.notDisplayed {
    display: none;
}

不确定我做错了什么，因为到目前为止 onClick 一直在使用函数。

Answer 1

React 只会 re-render 组件响应状态变化。重新分配变量本身几乎不会有任何 side-effects，除非稍后使用该变量。您对 editDisplay 的重新分配只会对同一组件绑定中的其他函数可见（在 React 中看到的情况非常不寻常，通常表明存在逻辑问题）。

您需要让您尝试更改的变量有状态。此外，请考虑使用布尔值而不是字符串值。您可能只能使用一个状态值来在标题和编辑之间切换。

const [editingTitle, setEditingTitle] = useState(false);
<button onClick={() => setEditingTitle(false)} id="edit-btn">EDIT</button>

<div className={editingTitle ? 'isDisplayed' : 'notDisplayed'}>
   <h2 className='indieNotebookTitle'>{notebook?.title}</h2>
</div>

当我尝试更改变量值时 onClick 不起作用

onClick not working when I attempt to change value of variable

html

javascript

onclick

event-listener

reactjs