Antd Select组件上的自定义文本框-PHP中文网问答

如果用户认为适合的选择不在“选择”选项中显示的选项中，我想让用户能够添加自定义文本。我已经成功创建了自定义文本字段，但是获取用户输入并将其设置为选择组件的值变得很痛苦（听起来很容易做到，但由于某种原因它不工作）这是我的实现

const [selectedpurpose, setSelectedPurpose] = useState("");// selected value of the select component
  const [customOption, setCustomOption] = useState("");//custom userinput
  
   const [dropoptions, setDropOptions] = useState([
{ value: "General Meeting", label: "General Meeting" },
{ value: "Consultation Meeting", label: "Consultation Meeting" },
{ value: "AdCampaign Meeting", label: "Ad Campaign Meeting" },
{ value: "Marketing Meeting", label: "Marketing Meeting" },
 ]);//select options

 // function to recored custom user input
 const handleAddOption = () => {
  if (customOption) {
  const newOption = { value: customOption, label: customOption };
  setDropOptions([newOption, ...dropoptions]);
  setSelectedPurpose(customOption);
  setCustomOption("");
 }
 };
    
   //my form
   
           {
                      if (e.target.value.length > 20) {
                        // if user has reached the maximum length
                        // show a message or change the color of the input to indicate the limit has been reached
                        // for example:
                        openNotificationWithIcon(
                          "error",
                          "Warning",
                          "Maximum length reached!"
                        );
                      } else {
                        setCustomOption(e.target.value);
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        handleAddOption();
                      }
                    }}
                  />

try this one import React from "react"; import "./styles.css"; import Select, { components } from "react-select"; const CustomInput = (props) => { const { maxLength } = props.selectProps; const inputProps = { ...props, maxLength }; return ; }; const App = () => { const options = [ { label: "Option 1", value: 1 }, { label: "Option 2", value: 2 }, { label: "Option 3", value: 3 } ]; return ( ); }; export default App;