Question

我正在对有条件地显示以下两个选项之一的记录进行过滤：1）record.jsx组件列表，或2）单个noResults.jsx组件。

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

目标：我想在noResults.jsx中设置一个按钮，将过滤器设置为“all”。问题：我可以将getRecords方法传递给它，它会显示它们，但不会在视觉上将select标记重置为'all'。

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

文件结构图：

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

Answer 1

如果没有看到代码，我认为savedRecordsView会在没有结果的情况下呈现如下内容：

<RecordsHeader />
<NoResults />

这意味着savedRecordsView是共享的父母＆＃39;这两个组成部分。通过一些重写，您可以通过props将回调传递给NoResults按钮可用于触发对所有过滤器的设置。

此回调将更新传递给RecordsHeader的prop，然后更新为Filter，它可以重新呈现相应的＆＃39; all＆＃39;从它原来的设置。

Answer 2

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

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

关于controlled components的React文档中的这篇文章正是我所寻找的。

React：从兄弟组件中的onClick上可视地重置HTML select标签

2 个答案: