反应自动完成元素以及将值添加到列表的选项（如果不存在）

Question

我必须创建一个自动完成的react组件。最初必须有5个自动完成字段。我将状态设置为5个输入元素（如

）的数组

this.state {activities : ['','','','','']}

我在其中应用地图功能以显示5个自动完成框。

我有一个值列表，列为自动完成选项。

Row>
                    {this.state.activities.map((newrow,index)=>{
                            return (
                                <Col md={12}>   
                                    <Row className="form-row">
                                        <Col md={11} sm={10} xs={9}>
                                            <div className="form-input">
                                               <AutoComplete
                                                    className="autosearch"
                                                    dataSource={options}
                                                    onSelect={this.onSelect.bind(this, index)}
                                                    filterOption={(inputValue, option) =>  option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />

                                            </div>
                                        </Col>
                                        <Col md={1} sm={2} xs={3}>
                                            <Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
                                        </Col>
                                    </Row>
                                </Col>)
                            })
                        }  

                </Row>

现在我必须创建一个自动完成功能，该功能也可以选择是否允许我添加一个列表中没有的选项。

请帮帮我。我是新来的人，要预先做出反应并表示感谢。

这是我为自动填充框推荐的网站enter link description here

我提到了它的基本示例代码