时间戳

首页 > 解决方案 > 进行选择后隐藏或最小化搜索构面组件

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

问题描述

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

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

标签： reactjsreactivesearch

解决方案

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

  • 使用状态变量

创建状态变量并在选择值时更新状态。您可以使用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>
  );
}

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

希望这可以帮助！

推荐阅读