Question

我正在尝试设置搜索，因此当我单击Enter时，它将开始搜索并重定向到搜索页面。我正在浏览文档，但不清楚如何设置。如何设置按Enter键开始搜索？我很难解决这个问题，尽管我认为这很简单。

class SearchBar extends Component {
  constructor(props) {
    super(props)
    this.state = {query: '', results: [], isLoading: false}
  }

  componentWillMount() {
     this.resetComponent()
   }

   resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

   search(query) {
     this.setState({ query });
     axios
       .get(`/api/search?query=${query}`)
       .then(response => {
         console.log(query);
         this.setState({ results: response.data});
       })
       .catch(error => console.log(error));
   }


  handleSearchChange = (query) => {
    this.search(query);
    this.setState({ isLoading: true, query })

    setTimeout(() =>
      this.setState({
        isLoading: false,
      }) , 300)

  }

  handleResultSelect = (e, { result }) => this.setState({ query: result}  )

  render () {

    const resultRenderer = ({ title }) => <List content = {title}/>
    return (
      <Search
        loading={this.state.isLoading}
        onResultSelect={this.handleResultSelect}
        onSearchChange={(event) => {this.handleSearchChange(event.target.value)}}
        showNoResults={false}
        query={this.props.query}
        selectFirstResult = {true}
        resultRenderer={resultRenderer}
        results ={this.state.results}
        { ...this.props}  />

    );
  }

}


export default SearchBar

谢谢！

Answer 1

这是如何执行此操作的最小示例。

app.get('/something/:id', (req, res, next) => {
  console.log(`Calling with param ${req.params.id}`);
  next(); // if you remove next from here it will not call the rest of the handlers
});

app.get('/something/else', (req, res, next) => {
  console.log(`Calling with else`);
  next();
});

这是一个有效的示例：https://stackblitz.com/edit/react-q5wv1c?file=Hello.js

Answer 2

在语义UI反应源代码中修改Search组件以实现onKeyPress处理程序

如何使用Enter提交语义反应搜索

2 个答案: