搜索输入 onchange 导致崩溃 - 如何使其成为提交搜索的按钮

Question

我在 MeteorJS 中有一个应用程序，它使用了 React（我对 JavaScript 没问题，但我正处于从 React 开始的学习曲线中）。当前的搜索输入使用了输入框的 onchange 函数，但这实际上是不需要的，因为这会大大降低应用程序的速度 - 每次用户键入时都会发出请求。

我基本上希望输入是基本输入，然后有一个按钮来触发搜索。

内联代码，用于在需要时调用搜索输入；

<div className="col-md-4 col-xs-12" style={disabledStyling.control}>
    <SearchInput placeholder="Search" onChange={this.filterGames} value={filter} />
</div>

搜索输入组件；

import PropTypes from 'prop-types';
import Icon from '../Icon';
import Styles from './styles';

const SearchInput = ({ placeholder, value, onChange }) => (
  <Styles.SearchInput className="SearchInput">
    <Icon iconStyle="solid" icon="search" />
    <input
      type="text"
      name="search"
      className="form-control"
      placeholder={placeholder}
      value={value}
      onChange={onChange}
    />
  </Styles.SearchInput>
);

SearchInput.defaultProps = {
  placeholder: 'Search...',
  value: '',
};

SearchInput.propTypes = {
  placeholder: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired,
};

export default SearchInput;

希望大家能帮忙;)

Answer 1

基本上您需要做的是使用 state 来存储来自 onChange 事件的值，然后在按钮 click/form 提交操作上将此值传递给函数这将实际获取数据。

Here is a small example on code sandbox where you can see this being applied both on a functional component and on a class component

让我们假设您的“包装器”组件是这样的：

const Form = () => {

 const filterGames = (event) => {
  // handle event and calls API
 }

 return (
  <div className="col-md-4 col-xs-12" style={disabledStyling.control}>
   <SearchInput placeholder="Search" onChange={filterGames} value={filter} />
  </div>
 )
}

我们在这里需要做的，基本上是添加状态并处理它而不调用 API 和一个按钮来实际调用 API。

const Form = () => {

 const [inputValue, setInputValue] = useState('');

 const filterGames = (event) => {
  // handle event and calls API
 }

 // this will store the value locally on the state
 const handleInputOnChange = (event) => {
  setInputValue(event.target.value);
 }

 return (
  <div className="col-md-4 col-xs-12" style={disabledStyling.control}>
   <SearchInput placeholder="Search" onChange={handleInputOnChange} value={inputValue} />
   <button type='submit' onClick={filterGames}>Submit</button>
  </div>
 )
}

ps：您还可以用 form 包装输入 + 按钮并使用 form.onSubmit 而不是 button.onClick。

搜索输入 onchange 导致崩溃 - 如何使其成为提交搜索的按钮

Search input onchange causes crashing - how to make it a button to submit search

javascript

reactjs

meteor