时间戳

首页 > 解决方案 > onClickHandler 有时有效，有时无效 - React

reactjs - onClickHandler 有时有效，有时无效 - React

问题描述

以下代码中的onClickHandler，在这个组件中，'SearchResult'，有时工作，有时不工作。

我想不出任何逻辑可以解释为什么它在工作时工作，以及为什么它不工作，什么时候不工作。

我在 onClickHandler 的开头放置了一个调试器，当它不工作时，它根本没有到达调试器 - 这表明有时甚至没有调用该函数，我不能找出原因。

此外，我尝试将函数中的所有代码移动到 onClick 内联，但是，它根本不起作用。

此外，我尝试使用函数声明而不是箭头函数，但它的行为仍然相同——有时有效，有时无效……

这是网站，您可以在搜索框中查看自己的行为。

这是 GitHub 存储库

在这里您可以看到一段视频，展示它是如何不工作的，除了一次它确实有效

请帮忙。

有问题的组件：

import { useDispatch } from 'react-redux'
import { Col } from 'react-bootstrap'

import { getWeatherRequest } from '../redux/weather/weatherActions'
import { GENERAL_RESET } from '../redux/general/generalConstants'

const SearchResult = ({ Key, LocalizedName, setText }) => {
  const dispatch = useDispatch()

  const onClickHandler = () => {
    dispatch({ type: GENERAL_RESET })
    dispatch(
      getWeatherRequest({
        location: Key,
        cityName: LocalizedName,
      })
    )
    setText('')
  }

  return (
    <Col className='suggestion' onClick={onClickHandler}>
      {LocalizedName}
    </Col>
  )
}

export default SearchResult

这是父组件：

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Form } from 'react-bootstrap'

import { getAutoCompleteResultsRequest } from '../redux/autoComplete/autoCompleteActions'
import { AUTO_COMPLETE_RESET } from '../redux/autoComplete/autoCompleteConstants'
import SearchResult from './SearchResult'

const SearchBox = () => {
  const [text, setText] = useState('')

  const dispatch = useDispatch()

  const autoComplete = useSelector((state) => state.autoComplete)
  const { results } = autoComplete

  const onChangeHandler = (e) => {
    if (e.target.value === '') {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }
    setText(e.target.value)
    dispatch(getAutoCompleteResultsRequest(e.target.value))
  }

  const onBlurHandler = () => {
    setTimeout(() => {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }, 100)
  }

  return (
    <div className='search-box'>
      <Form inline>
        <div className='input-group search-md search-sm'>
          <input
            type='search'
            name='q'
            value={text}
            onChange={onChangeHandler}
            onBlur={onBlurHandler}
            placeholder='Search Location...'
            className='mr-sm-2 ml-sm-3 form-control'
          />
        </div>
      </Form>
      <div className='search-results'>
        {results &&
          results.map((result) => {
            return (
              <SearchResult key={result.Key} {...result} setText={setText} />
            )
          })}
      </div>
    </div>
  )
}

export default SearchBox

标签： reactjsreact-hooksonclick

解决方案

我对您的代码进行了一些操作，看起来可能的解决方案可能是 SearchResult.js 中的以下添加：

const onClickHandler = (e) => {
    e.preventDefault();
...

经过一些测试

请删除onBlurHandler. 这似乎是onClickHandler对结果的影响。

推荐阅读