Блог

Я создал пользовательский реактивный компонент на основе официальных документов:https://docs.appbase.io/docs/reactivesearch/v3/advanced/reactivecomponent /

Это работает нормально, однако, когда я использую компонент и очищаю фильтр своего пользовательского компонента, как я могу обновить состояние пользовательского интерфейса пользовательского компонента?

Используя пример в документах: как я могу обновить состояние пользовательского интерфейса ColorPicker при очистке цветового фильтра, чтобы отразить, что цвет не выбран?

Не нашел ничего, связанного с этим, в документах.

На случай, если кто-либо еще столкнется с такой же проблемой: реквизиты визуализации включают объект value, которому присваивается значение null, если вы очистите фильтры. Таким образом, можно условно обновить состояние пользовательского интерфейса ColorPicker (или любого другого пользовательского компонента, который вы используете).

Если я правильно понимаю, вам нужно использовать значение, которое поступает через render prop.

Вот пример использования из моего проекта

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