Question

我是React的新手。我正在尝试使用该组件实现搜索栏：

https://www.npmjs.com/package/material-ui-search-bar

我当前的代码是：

function Searchbar() {

  const [finalQuery, setQuery] = useState("");


    return(
        <SearchBar              
            onChange={(event) => console.log(event)}
            onRequestSearch={() => setQuery(#Update the state so that it reflects the query the user wrote)}
            style={{
                marginTop: 200,
                marginLeft: 'auto',
                marginRight: 'auto',
                maxWidth: 800,
                }}
        />
    )
}

我不清楚如何将最终搜索的值（当用户按Enter时）传递给setQuery，以便更新状态finalQuery。

例如，如果我这样做：

onRequestSearch={() => setQuery(console.log("trytry"))}

当我按Enter键时，在控制台中，我得到trytry，所以我假设finalQuery的状态已正确更新。但是我该如何动态地做到呢？

最终查询将被发送到API。

Answer 1

onChange每次文本更改时都会调用一次，因此在onChange上正确的查询更新位置

return (
<SearchBar
    value={finalQuery}
    onChange={(newValue) => setQuery(newValue)}
    onRequestSearch={() => doSomethingWith(query)}
/>
)

Answer 2

也许您需要这样做。

 <
    SearchBar
            value={finalQuery}
            onChange={(event) => setQuery(event.target.value)}
            onRequestSearch={() => doSomethingWith(finalQuery)}
        />

材质用户界面搜索栏-使用挂钩设置查询状态

2 个答案: