进行选择后隐藏或最小化搜索方面组件

Question

我们正在构建一个 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>
            )
        }
    }

虽然这可行，但我想知道是否有更简洁的方法，它也避免了对列表进行自定义呈现的需要。基本上，在没有切面选择的情况下使用默认渲染的解决方案。

Answer 1

我认为这是我认为可行的最佳方法。以下是我可能采用的其他方式：

使用状态变量

创建状态变量并在选择值时更新状态。您可以使用 onValueChange 执行此操作。每当此状态更改时，您可以为单个列表设置显示 none。

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

这是您可以遵循的另一种方式。但自定义渲染方法是解决此问题的最佳方法。

希望对您有所帮助！

进行选择后隐藏或最小化搜索方面组件

Hide or minimise search facet component after making a selection

reactjs

reactivesearch