是否可以修改搜索栏长度？ + defaultValue 似乎不起作用

Question

是否可以使搜索栏的长度变宽？ 我不是在谈论实际大小，因为有一个 size 属性，只是长度。

此外，搜索中的 defaultValue 似乎根本不起作用，只是我吗？ 我使用的代码基本上是这个代码的复制粘贴： https://react.semantic-ui.com/modules/search/#types-category我刚刚添加：

let defaultValue = "Search"

在渲染之前和我的搜索调用是这样的（添加了未显示的 defaultValue 部分）

                <Search
                    defaultValue={defaultValue}
                    category
                    loading={isLoading}
                    onResultSelect={this.handleResultSelect}
                    onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
                    results={results}
                    value={value}
                    {...this.props}
                />

Answer 1

您可以执行以下操作：

1. 将value属性设置为value || defaultValue value || defaultValue如果值为空，这将设置搜索字段的默认值

2. 为搜索组件设置一个类名，并通过CSS更改宽度

  <Search className="search-bar" loading={isLoading} onResultSelect={this.handleResultSelect} onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })} results={results} value={value || defaultValue} {...this.props} /> 

 .search-bar{ width: 500px; .input{ width: 100%; } } 

这是现场演示

希望能帮助到你 ：）

Answer 2

是的，我们可以通过改变样式中的填充大小来调整搜索栏的长度。

.search-bar{
padding-left:50px;
}