React动态添加x个选择框以过滤数据

Question

我有一个应用程序，该应用程序在不同屏幕上具有各种选择框过滤器。 我正在使用通过对象传递的json对象填充过滤器。

这是指向沙盒https://codesandbox.io/s/ym5qyjj5jv

的链接

我遇到的问题

1）我想从page.js挂起状态，以便我可以为每个过滤器设置值，然后在用户单击“重置”时更新该状态。主要问题是在searchbar.js中将状态作为道具

我在用于生成过滤器的json中有状态名称，所以我想编写this.props。[variable]，但这不起作用

2）任何其他提示都很好

Answer 1

我可以使用它，请参阅问题中的链接。

在page.js中，我通过了状态（... this.state）

 <SearchBar
          onChange={this.onChange}
          onReset={this.onReset}
          filters={filters}
          {...this.state}
        />

然后当我遍历过滤器json时在searchBar.js中，然后我可以获取道具

value={this.props[filter[1].name]}

如果还有其他更好的方法，请告诉我