美文网首页
React 中 input 的 onChange 事件 e.ta

React 中 input 的 onChange 事件 e.ta

作者: 简小咖 | 来源:发表于2019-11-05 18:11 被阅读0次

在 input 框 change 的时候需要做防抖处理,不然会取不到 value 的值
项目中如果自带debounce就可以直接用,如果没有安装一下lodash的debounce插件,
具体可以查一下官网,以下代码是项目里有插件的相关语法

import { debounce } from 'lodash'

class AppPopover extends PureComponent {
  constructor() {
    super()
    this.doSearchAjax = debounce(this.doSearchAjax, 500)
  }
  // 搜索
  onSearchChange = e => {
    this.doSearchAjax(e.target.value)
  }

  doSearchAjax = value => {
    const { dispatch, applicationList } = this.props;
    if (value) {
      const list = []
      applicationList.forEach(item => {
        if (item.component.name.indexOf(value) > 0) {
          list.push(item)
        }
      })
      this.setState({
        appList: list,
      });
    } else {
      dispatch({
        type: 'canvas/fetchApplication',
        cb: (res) => {
          this.setState({
            appList: res,
          });
        },
      });
    }
  }
}
        <Input
            placeholder="搜索应用"
            onChange={this.onSearchChange}
            allowClear
            prefix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
          />

doSearchAjax 为项目中的调接口逻辑 onSearchChange为搜索框绑定事件
该功能是搜索框输入内容,筛选出下拉菜单的相关内容

相关文章

网友评论

      本文标题:React 中 input 的 onChange 事件 e.ta

      本文链接:https://www.haomeiwen.com/subject/rosebctx.html