Reactjs React Auto Complete元素以及选项，以便在不存在时向列表中添加值

我必须创建一个自动完成反应组件。最初必须有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>

行>
{this.state.activities.map（（newrow，index）=>{
返回(

我引用了它的基本示例代码