React代码中if-else逻辑失效：点击按钮无输出问题求助

你的代码存在两个核心问题，导致点击按钮后无输出：

1. 按钮点击事件未正确触发组件渲染 #

按钮的onClick回调里返回<Checker/>是无效操作——React不会自动将这个返回的JSX挂载到DOM中。你需要通过状态变量来控制是否显示检查结果。

2. 输入值类型不匹配导致比较逻辑异常 #

输入框的event.target.value是字符串类型，直接和数字18比较会触发字符串字典序比较（比如"9" > "18"会被判定为true，这显然不符合年龄比较的逻辑），导致判断结果错误。

修改后的完整代码 #

import { useState } from "react";

function App() {
    const [age, setAge] = useState(0);
    const [showResult, setShowResult] = useState(false); // 新增状态控制结果显示

    const handleInput = (event) => {
        // 将输入值转为数字，避免类型错误
        setAge(Number(event.target.value));
    };

    const Checker = () => {
        if (age > 18) {
            return <h1>Eligible for Passport</h1>; // 修正文案与需求一致
        } else {
            return <h1>Not eligible</h1>;
        }
    };

    return (
        <div className="App">
            <input type="text" onChange={handleInput} />
            {/* 点击按钮时设置显示结果的状态为true */}
            <button onClick={() => setShowResult(true)}>Check</button>
            {/* 根据状态决定是否渲染结果组件 */}
            {showResult && <Checker />}
        </div>
    );
}

export default App;

关键修改点说明 #

• 新增showResult状态变量，用于控制是否显示检查结果。
• 按钮点击事件改为设置showResult为true，触发组件重新渲染并显示<Checker/>。
• handleInput中将输入值转为数字类型，确保年龄比较逻辑正确。
• 修正了文案，与你需求中的“Eligible for Passport”和“Not eligible”保持一致。

如果你想简化代码，也可以去掉单独的Checker组件，直接在渲染逻辑中判断：

import { useState } from "react";

function App() {
    const [age, setAge] = useState(0);
    const [showResult, setShowResult] = useState(false);

    const handleInput = (event) => {
        setAge(Number(event.target.value));
    };

    return (
        <div className="App">
            <input type="text" onChange={handleInput} />
            <button onClick={() => setShowResult(true)}>Check</button>
            {showResult && (
                <h1>{age > 18 ? "Eligible for Passport" : "Not eligible"}</h1>
            )}
        </div>
    );
}

export default App;

内容的提问来源于stack exchange，提问作者Syed Usman Hassan