时间戳

首页 > 解决方案 > React：如何在任何导航上运行功能？

reactjs - React：如何在任何导航上运行功能？

问题描述

我在导航栏（react-bootstrap navbar）上有一个搜索框。我需要清除任何导航或路由的值。我怎么做？

导航栏是一个类组件。很抱歉现在添加这个。

搜索框代码：

<FormControl
            id="search-email"
              onChange={this.handleSearchInput}
              value={this.state.searchText}
              type="text"
              placeholder="Search Emails"
              className="mr-sm-2"
            />
            <Button onClick={this.handleSearchSubmit} variant="outline-light">
              Search
            </Button>

标签： reactjsreact-bootstrap

解决方案

react router功能组件提供了一种使用react hook解决问题的简单方法。

以下代码为您提供了一个示例：

const myComponent = ({ prop1, prop2 }) => {
    let [searchText, setSearchText] = useState(null);
    let history = useHistory();

    useEffect(() => {
        setSearchText(null);
    }, [history]);

    return (
        ...
    )
}

在这里，每次useEffect运行值的变化。setSearchTexthistory

如果将当前组件重写为功能组件太复杂，您可以将搜索栏隔离在单独的组件中并在那里使用功能逻辑。

推荐阅读