Question

我有一些 div 元素并且只显示标题，当我点击它时，它应该显示表单，如果显示表单，它应该关闭它。

我尝试了这段代码，但它不起作用，可能是因为 useState 是异步，所以它不会立即更新。

我曾尝试使用 useEffect，但我的实现并不成功，这是一个代码片段：

import React, { useState } from 'react';
import './AdminPageStyle.css';

const AdminPage = () => {
    document.title = 'Admin page';
    const [addPanel, setAddPanel] = useState(false);

    return(
        <main className="main_class">
            <h1>Hello admin!</h1>
            {/* Navbar */}
            <nav className="database-manipualtion_class">
                <div className="add-update-delete_class" id="add-panel_id">Add new animation</div>
                <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
                <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
            </nav>

            {/* Panel for adding new animation */}
            <div className="add_class" onClick={() => setAddPanel(!addPanel)} style={{display: addPanel ? 'flex': 'none'}}>
                <h3>Add new animation</h3>
                <form className="form_class">
                    <div className="input-field_class">
                        <label className="label_class" htmlFor="add-name">Add name</label>
                        <input type="text" name="add-name" id="add-name_id" placeholder="Awesome animation" />
                    </div>
                    <div className="input-field_class">
                        <label className="label_class" htmlFor="add-gifAdrress">Add gif adrress</label>
                        <input type="text" name="add-gifAdrress" id="add-gifAdrress_id" placeholder="/images/animation_gifs/loader.png" />
                    </div>
                    <button type="button" className="add-new-animation_class">Make new animation</button>
                </form>
            </div>

Answer 1

问题是我试图显示/隐藏标题而不是表单，所以：

<nav className="database-manipualtion_class">
  <div className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" onClick={() => setAddPanel(!addPanel)} style={{display: addPanel ? 'flex': 'none'}}>

应该翻译成这样：


<nav className="database-manipualtion_class">
  <div onClick={() => setAddPanel(!addPanel)} className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" style={{display: addPanel ? 'flex': 'none'}}>

useState 不直接在 reactjs 中更新

1 个答案: