在按钮单击时添加 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} />&nbsp;))你的handleAddClick函数可以向语言列表添加一个新元素，例如：setLanguageList([...languageList, {name: '', otherFields:''}])