在按钮单击时添加 React-Select 下拉组件

Question

我正在尝试通过单击按钮添加组件。我正在使用反应选择下拉包。我尝试使用 concat 但它给出了一个错误并且没有添加到 DOM 中。这是我的 jsx 文件const LanguageSelect = (props) => {    const {options, name, isLanguage} = props;    const [language, setLanguage] = useState([{ value: '', label: '' }]); // Input Change     const handleSelectDropdownChange = (selected, index) => {        const {value, label} = selected;        const list = [...inputList];        list[value, label] = language;        setLanguage(list);        console.log(list);    }    // handle to add language dropdown    const handleAddClick = () => {        setInputList([...inputList, {value: "", label: ""}]);        <LanguageSelect options={options} placeholder={placeholder} name={name} isLanguageBlock={isLanguageBlock} title={title} />    }return (<div className="form-group">            <label htmlFor={name} className="control-label">{title}</label>                <div className="form-input-container">                    <Select                         className="profile-module-select-container"                        classNamePrefix="profile-module-select"                        options={options}                        onChange={selected => {                            setDropdown({                                optionSelect: selected.value                            });                            handleSelectDropdownChange(selected, i);                        }}                    />{isLanguage && (<div className="add-language-selection">                    <a className="addLanguage" id="addLanguage" role="link" onClick={handleAddClick} tabIndex={0}>+Add Language</a>                     </div>)}                </div>            </div>    )}

Answer 1

如果要基于单击添加新组件，可以在列表循环内渲染该组件，例如：

languageList.map((item, index) => return (

<LanguageSelect key={index} name={item.name} otherFields={item.otherFields} /> 

))

你的handleAddClick函数可以向语言列表添加一个新元素，例如：

setLanguageList([...languageList, {name: '', otherFields:''}])