React：下拉框仅选Yes时显示输入框的代码问题修复

你的代码问题出在输入框的显示判断逻辑上——当前用showtext?做判断，只要showtext不是空字符串（比如选了"No"），条件就会成立，所以输入框会一直显示。

只需要把判断条件改成严格等于"Yes"，同时修正export default的语法错误（组件名不能有空格），就能实现需求：

import React, { useState } from "react";

function FormHooks(props){
    const [showtext, setShowText] = useState("")
    const handleChange = (e)=>{
      const getvalue = e.target.value
      console.log(getvalue)
      setShowText(getvalue)
    }
    return(
        <div>
            {/* 仅当选中"Yes"时渲染输入框 */}
            {showtext === "Yes" ? <input type="text" placeholder="Enter Company name"/> : null}
            <form>
                <div>
                    <label>Are you employed?</label>
                    <select onChange={handleChange}>
                        <option value="select">select</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div>
                    
                </div>
            </form>
        </div>
    )
}
// 修正组件名的空格问题
export default FormHooks

关键修改点：

• 把输入框的显示条件从showtext?改为showtext === "Yes"，精准匹配选中值
• 修正export default后的组件名，将Form Hooks改为FormHooks（React组件命名必须是驼峰式且无空格）

内容的提问来源于stack exchange，提问作者pooja thakur