Question

这是一个非常含糊的问题，但请耐心等待。

我使用React创建一个组件，它接受一个包含键和值的对象作为prop。每个值都是值列表。该组件应该提供一个按钮来创建包含所提供对象的键的选择，并且还创建一个可以删除所述选择和自身的按钮。我应该能够创建任意数量的选择。

当任何选项发生变化时，它应该创建另一个选择，它包含与父选择的选定键对应的值列表。然后，我应该能够从父选择'键和子项'值中形成键值对。

我的问题是如何保留对所有内容的引用？删除按钮必须仅删除它创建的选择以及子选择。我已经玩过将数据添加到数组中，其中这些组件可以非常容易地推送和弹出，但是删除按钮必须知道它在数组中的位置，然后还要更新其他组件的位置。选择还需要了解彼此。

我很困惑，不知道如何解决这个问题。

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

选择列表，能够删除它们，并添加子项选择

1 个答案: