在antd React项目中选择Select下拉框指定选项时如何显示输入框

你遇到的问题可通过以下修正解决：

问题根因 #

• useState 是React Hook，仅能在函数组件/自定义Hook内部调用，原代码直接在全局作用域声明未生效
• 匹配判断值与实际Option的value字段不匹配，且未处理非目标选项的状态重置逻辑
• 条件渲染语法不完整，缺少else分支
• 未导入Select组件
• 同级组件未用根节点包裹，不符合React渲染规则

修正后完整代码 #

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Select, Input } from 'antd';
import 'antd/dist/antd.css';

const { Option } = Select;
const { TextArea } = Input;

function App() {
  const [inputBox, setInputBox] = useState(false);

  const onChange = (value) => {
    // 匹配小写lucy，和Option的value值保持一致
    if (value === "lucy") {
      setInputBox(true);
    } else {
      // 非目标选项时隐藏输入框
      setInputBox(false);
    }
  }

  return (
    // 用Fragment包裹同级节点
    <>
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={onChange}
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="tom">Tom</Option>
      </Select>
      {/* 补全三元表达式的else分支，返回null表示不渲染 */}
      {inputBox ? <TextArea placeholder="Lucy Text" rows={3} style={{ marginTop: 10, width: 200 }} /> : null}
    </>
  )
}

ReactDOM.render(<App />, document.getElementById("container"));

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