React：在同级组件中通过onClick可视地重置HTML选择标记

我正在为有条件地显示以下两个选项之一的记录执行筛选：1）record.jsx组件列表，或2）单个noResults.jsx组件。React：在同级组件中通过onClick可视地重置HTML选择标记

过滤器（filter.jsx）位于名为recordsHeader.jsx的组件中，作为HTML选择标记。它有一个onChange事件，它调用一个getRecords方法，该方法允许根据select标签中的某些选项对结果记录进行过滤。

目标：我想在noResults.jsx中设置一个按钮，将过滤器设置为“全部”。问题：我可以将getRecords方法传递给它，它会显示它们，但不会将选择标记直观地重置为“全部”。

我知道我可以用jQuery或Vanilla抓住元素并手动重置它，这很有效，但我想让React为我做所有dom的东西。

地图文件结构：

- recordsDashboard.jsx 
    - savedRecordsView.jsx 
    - recordsHeader.jsx 
     - filter.jsx 
    - noResults.jsx <-- click here and visully reset filter.jsx 
    - record.jsx

来源

2017-04-05 Mike Fleming

在没有看到代码，我想象中的savedRecordsView呈现类似的东西在没有结果的情况下，执行以下操作：

<RecordsHeader /> 
<NoResults />

这意味着，savedRecordsView是共享这两个组件的“父”。通过一些重写，您可以通过道具传递回调到NoResults，该按钮可以用来触发所有过滤器的设置。

这个回调会更新一个传递给RecordsHeader的道具，然后是Filter，它可以从原来的东西中重新渲染适当的'all'设置。

来源

2017-04-05 17:52:10 bmartin

不错，是的，这是非常多的。问题主要是找出哪个组件应该保持状态，以及我遇到的问题是，像select标签，窗体或textfield这样的HTML元素在React之外都有自己的状态。 –

解决！在我的问题中，我很难说清楚这一点，但像select，form和textfield这样的HTML元素在React之外都有自己的状态。

我解决了这个问题，将我的handleSelectChange方法和filterValue变量从select组件中移动到savedRecordsView.jsx中，这样filter.jsx和noResults.jsx都可以共享它们。

这篇文章在React文档中关于controlled components几乎就是我正在寻找的东西。

来源

2017-04-06 14:53:15

React：在同级组件中通过onClick可视地重置HTML选择标记

回答

相关问题