ReactiveSearch 自定义组件和清除过滤器

Question

I created a custom ReactiveComponent based on the official docs: https://docs.appbase.io/docs/reactivesearch/v3/advanced/reactivecomponent/

This works fine, however when I use the component and clear the filter of my custom component, how can I update the ui state of the custom component?

Using the example in the docs: When clearing the color filter, how can I update the ColorPicker UI state to reflect that no color is selected?

Haven't found anything related to this in the docs.

Answer 1

In case anyone else encounters the same issue: The render props of include a value object which is set to null if you clear the filters. This way it is possible to conditionally update the ColorPicker UI state (or whatever custom component you use).

Answer 2

If I understand clear you need to use value that coming via render prop.

Here is an example usage from my project

 render={({ data, handleChange, value }) => {
                return (
                  <div
                    role="listbox"
                    aria-label="SpecialCategoryFilter-items"
                    className="list-filter"
                  >
                    {data.map((item) => (
                      <p
                        className="button-large-item"
                        key={item.key}
                        role="option"
                        aria-checked={value[item.key] ? true : false}
                        aria-selected={value[item.key] ? true : false}
                      >
                        <input
                          style={{ display: "none" }}
                          type="checkbox"
                          value={item.key}
                          onChange={(e) => {
                            handleChange(e);
                          }}
                          id={"SpecialCategoryFilter-" + item.key}
                          name={"SpecialCategoryFilter-" + item.key}
                        />
                        <label
                          htmlFor={"SpecialCategoryFilter-" + item.key}
                        >
                          <span>{item.key}</span>
                        </label>
                      </p>
                    ))}
                  </div>
                );
              }}