Question

这是我的App组件：

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import { withRouter } from 'react-router-dom';

import Toolbar from './components/Navigation/Toolbar/Toolbar';
import Homepage from './components/Homepage/Homepage';
import CategoryPage from './containers/CategoryPage/CategoryPage';
import SingleMealPage from './containers/SingleMealPage/SingleMealPage';
import SearchPage from './containers/SearchPage/SearchPage';
import AboutUsPage from './components/AboutUs/AboutUsPage';
import ContactPage from './components/Contact/ContactPage';

class App extends Component {
  state = {
    searchTerm: ''
  }

  searchTermHandler = (mealName) => {
    if(mealName !== '') {
      const queryParams = [];
      queryParams.push(encodeURIComponent(mealName));
      const queryString = queryParams.join();

      this.props.history.push({
        pathname: '/searchResults',
        search: '?' + queryString
      });

      this.setState({searchTerm: ''});
    }
  }

  render() {
    return (
      <div>
        <Toolbar          
          clickSearch={() => this.searchTermHandler(this.state.searchTerm)}
          changeSearch={(event) => this.setState({searchTerm: event.target.value})} />
          <Switch>
            <Route path="/category" component={CategoryPage} />
            <Route path="/singleMeal" component={SingleMealPage} />
            <Route path="/searchResults" component={SearchPage} />
            <Route path="/aboutUs" component={AboutUsPage} />
            <Route path='/contact' component={ContactPage} />
            <Route path="/" component={Homepage} />
          </Switch>
      </div>
    );
  }
}

export default withRouter(App);

出什么问题了？当我输入搜索词并单击一个按钮时，它将带我到SearchPage，但在输入字段中仍然存在搜索词。 this.setState({searchTerm: ''});函数内的行searchTermHandler清除输入值，但不会删除输入字段中的纯文本。

此外，我什至不必单击搜索按钮即可发生此问题。只需导航到“ CategoryPage”，然后查看在“首页”上输入的搜索字词仍存在于CategoryPage上即可。

在我看来，这是一个简单的问题，但是我无法解决这个问题。

只要您需要，我将发布我的搜索和工具栏组件：

import classes from './Search.css';

const search = (props) => (
  <div className={classes.Search}>
    <input type="text" placeholder={props.placeholder} onChange={props.change} />
    <button type="submit" onClick={props.clicked}><i className="fa fa-search"></i></button>
  </div>
);

export default search;

import React from 'react';

import classes from './Toolbar.css';
import Search from '../../UI/Search/Search';

const toolbar = (props) => (
  <header className={classes.Toolbar}>
    <Search
      placeholder="Search recipes"
      clicked={props.clickSearch}
      change={props.changeSearch} />
  </header>
);

export default toolbar;

预先感谢您的帮助。

Answer 1

您需要将搜索值向下传递到输入字段：

<Toolbar searchTerm={this.state.searchTerm} ...
<Search value={props.searchTerm} ...
<input value={props.value} ...

搜索后如何清除输入字段（删除搜索词）？

1 个答案: