Скрыть или свернуть компонент фасета поиска после выбора - PullRequest
Новая
       30

Скрыть или свернуть компонент фасета поиска после выбора

1 голос
/ 04 октября 2019

Мы создаем решение Reactivesearch, и у нас есть требование скрыть или минимизировать фасет (в данном случае SingleList ) после выбора.

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

    render: ({
        loading,
        error,
        data,
        handleChange,
        value
    }) => {
        if (value !== "") {
            return (
                <span>{value}</span>
            )
        }
        else {
            return (
                <ul>
                    {
                        data.map(item => (
                            <li>
                                <input
                                    type="radio"
                                    value={item.key}
                                    onChange={handleChange}
                                />
                                <span>
                                    <span>{item.key}</span>
                                    <span>{item.doc_count}</span>
                                </span>
                            </li>
                        ))
                    }
                </ul>
            )
        }
    }

Хотя это работает, мне интересно, есть ли более чистый способ, который также позволяет избежатьнужно иметь пользовательский рендер списка. По сути, решение, которое использует рендеринг по умолчанию в случае отсутствия выбора фасетов.

1 Ответ

2 голосов
/ 04 октября 2019

Я думаю, что это лучший подход, который, я думаю, сработает. Вот другие способы, как я мог бы сделать:

  • Использование переменной состояния

Создать переменную состояния и обновлять состояние при каждом выборе значения. Вы можете сделать это, используя onValueChange. Всякий раз, когда это состояние изменяется, вы можете установить ни один дисплей для одиночного списка. 

handleUpdate = (value) => {
  this.setState({
    value,
  })
}

render(){
  const { value } = this.state;

  return (
    <div>
      <SingleList onValueChange={this.handleUpdate} dataField={} style={value ? { display: 'none' } : { display: 'block'}} />
      {value ? <span>{value}</span> : null}
    </div>
  );
}

Это другой способ, которым вы можете следовать. Но пользовательский метод рендеринга - лучший способ решить эту проблему.

Надеюсь, это поможет!

...