如何在选择选项值时显示输入框？答案

【问题标题】：How to display an input box on selection of options value?如何在选择选项值时显示输入框？
【发布时间】：2021-09-13 11:21:34
【问题描述】：

在一个 antd React 项目中，我有一个带有某些值的下拉列表。我的意图是在选择特定选项时切换文本框。考虑以下代码示例

import { Input } from 'antd';

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

// const [inputBox, setInputBox] = useState(false)

function onChange(value) {
  {/* if(value == "Lucy") {
    setInputBox(true)
} */}
}

ReactDOM.render(
  <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>,

  {/* Here I need to create a TextBox on selecting 'lucy', and dismissed on selection of other option */}
  {
   inputBox ? (<TextArea placeholder="Lucy Text" rows={3} />)
  }
  
  document.getElementById("container")
);

这里是 Codesandbox 链接：https://codesandbox.io/s/select-with-search-field-antd-4-17-0-alpha-0-forked-9qeq9

我无法创建该输入框。任何适当的解决方案都受到高度赞赏

【问题讨论】：

标签： reactjs antd

【解决方案1】：

你快到了，但是有两个问题：

您需要将代码移动到组件中才能使用useState 挂钩管理状态。然后将组件传递给ReactDOM.render 方法。
其次，在onChange方法中，需要将变量设置为false，则不需要输入：

function onChange(value) {
  if(value == "Lucy") {
    setInputBox(true)
  } else {
    setInputBox(false)
  } 
}

或

function onChange(value) {
  setInputBox(value == "Lucy");
}

【讨论】：

【解决方案2】：

hook 只能在功能组件内定义，因此您可能需要这样做

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
import TextArea from "antd/lib/input/TextArea";

const { Option } = Select;

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

  function onChange(value) {
    if (value === "lucy") {
      setInputBox(true);
    }
  }

  return (
    <div>
      <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>
      {inputBox ? <TextArea placeholder="Lucy Text" rows={3} /> : null}
    </div>
  );
};

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

【讨论】：