選擇清單，有能力刪除它們，並添加子選擇

Question

這是一個非常模糊的問題，但請耐心等待。

我正在使用React創建一個組件，它將一個包含鍵和值的對象作爲一個道具。每個值都是一個值列表。這個組件應該提供一個按鈕來創建一個包含提供的對象的鍵的選擇，並且創建一個可以移除所述選擇和它自身的按鈕。我應該可以創建任意數量的選擇。

當任何一個選擇有變化時，它應該在其一側創建另一個選擇，其中包含對應於父級選擇所選鍵的值列表。然後，我應該能夠從父選擇鍵和孩子的值中形成一個鍵值對。

我的問題是如何保持對所有內容的引用？刪除按鈕必須刪除它所創建的選擇以及子選擇。我已經玩過了將數組添加到數組中，這些組件可能非常容易推動和彈出，但是刪除按鈕必須知道它在數組中的位置，然後也更新其他位置。而且選擇需要彼此瞭解。

我很困惑，不知道該怎麼辦。

Answer 1

每個刪除選對應是單獨的部件（例如SelectField），是這樣的：

class SelectFields extends Component { 
    _handleDelete = (selectToRemove) => { 
    this.setState({ 
     fields: this.state.fields.filter(select => select !== selectToRemove) 
    }) 
    }; 

    render() { 
    return (
     <div> 
     {this.props.selects.map(select => <SelectField data={select} onDelete={this._handleDelete.bind(this, select)}/>)} 
     </div> 
    ) 
    } 
}