React中如何在输入框keyup事件中控制重置按钮的显隐

直接修改代码即可实现需求，核心是根据搜索框内容状态动态切换重置按钮的类名，同时完善相关逻辑：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useEffect, useState } from 'react';
import { Button, Container, Form, Navbar } from "react-bootstrap";
import { Link } from "react-router-dom";

export default function AppNavbar() {
    const [search, setSearch] = useState("");

    // 完善依赖项，避免无意义重渲染
    useEffect(() => {
        if (search !== '') {
            console.log(search);
        }
    }, [search]);
    
    // 手动清空搜索框的函数
    const handleReset = () => {
        setSearch("");
    }
    
    return (
        <Navbar bg="accent-1" expand="lg" className='py-3'>
        <Container>
            <Navbar.Brand as={Link} to="/" className="m-0 p-0 lh-1">Project</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Form className="mx-0 mx-lg-5 d-flex flex-fill justify-content-center" role="search">
                    <Form.Group className="input-group" id="searchbox" controlId="prodSearch">
                        <Form.Control 
                            type="search" 
                            name="prodSearch" 
                            className="searchbox border-accent" 
                            placeholder="Search for products" 
                            maxLength={75} 
                            aria-label="Search for products" 
                            aria-describedby="button-search" 
                            onKeyUp={e => setSearch(e.target.value)}
                            value={search} // 绑定状态，确保受控组件
                        />
                        {/* 根据搜索内容动态切换显隐类 */}
                        <Button 
                            type="button" 
                            variant="text" 
                            className={`clear-search ${search ? 'show' : 'hidden'}`}
                            onClick={handleReset}
                        >
                            <FontAwesomeIcon icon="fa-solid fa-xmark" />
                        </Button>
                        <Button type="submit" id="button-search" variant="search" className="px-4 bg-accent-2"><FontAwesomeIcon icon="fa-solid fa-magnifying-glass" /></Button>
                    </Form.Group>
                </Form>
            </Navbar.Collapse>
        </Container>
        </Navbar>
    );
};

关键修改说明： #

• 动态类名控制：用模板字符串${search ? 'show' : 'hidden'}，根据search是否为空自动切换按钮的显隐类，直接实现需求中的显示/隐藏逻辑。
• 受控组件绑定：给输入框添加value={search}，确保输入框内容和状态完全同步，避免状态不一致的问题。
• 重置逻辑优化：将按钮类型从reset改为button，通过onClick触发手动清空状态的函数，避免默认表单重置行为带来的意外影响。
• 修复useEffect依赖：添加[search]作为依赖数组，确保只有搜索内容变化时才执行回调，避免无意义的重复触发。

你的CSS样式无需修改，保持原有逻辑即可：

.navbar .input-group .clear-search.show {
    display: block;
}

.navbar .input-group .clear-search.hidden {
    display: none;
}

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez