选择清单，有能力删除它们，并添加子选择

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> 
    ) 
    } 
}