对 `ClSearchBar` 的 `onBlur` 和 `onFocus` 支持更多的行为?

[czqhurricnae]

我的希望是对这个组件的所提到的这两个 props 支持用户的处理函数的传入.就像 Semantic-UI-React 库的 Search 组件那样.

  handleFocus = (e) => {
    debug('handleFocus()')

    _.invoke(this.props, 'onFocus', e, this.props)
    this.setState({ focus: true })
  }

  handleBlur = (e) => {
    debug('handleBlur()')

    _.invoke(this.props, 'onBlur', e, this.props)
    this.setState({ focus: false })
  }

好像它有导入 lodash 这个库.

这样的话, 就能让用户更灵活定义这两个行为了. 比如作者的 demo 中演示, 我在搜索框输入 广, 下拉备选框中出现了 广东 和 广西. 用户去会点击其中一个选项, 但是我也希望在焦点重新聚焦到搜索框时, 直接弹出原来的备选选项, 可以让我重新选择.

_{Sent from PPHub}

[czqhurricnae]

http://rrd.me/eYMFt

[czqhurricnae]

作者可以看下这个链接的描述: https://stackoverflow.com/questions/52412650/semanticui-search-dropdown-selection-does-not-populate-input

[czqhurricnae]

import React from 'react'
import { Search, Label } from 'semantic-ui-react'

import PropTypes from 'prop-types'
import _ from 'lodash'

const resultRenderer = ({ title }) => <Label content={title} />

resultRenderer.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

const initialState = { isLoading: false, results: [], value: '', open: false,
  segmentations: [] }

class MySearch extends React.Component {
  state = initialState

  handleResultSelect = (e, { result }) => {
    this.setState({ value: result.title, open: false, })
    this.setSelected(result.title)
  }

  handleSearchChange = (e, { value }) => {
    this.setState({ isLoading: true, value })
    setTimeout(() => this.handleSegment(this.state.value))

    setTimeout(() => {
      if (this.state.value.length < 1) return this.setState(
        initialState)

      const isMatch = result => this.state.segmentations.every((item,
        index, array) => {
        return new RegExp(item)
          .test(result.title)
      })

      this.setState({
        isLoading: false,
        results: _.filter(this.props.source, isMatch),
        open: Boolean(value.length)
      })

    }, 500)

    this.setSelected(value)
  }

  handleBlurSearch = (e) => {
    if (!e.relatedTarget) { var open = false } else if (e.relatedTarget && e
      .relatedTarget.classList) {
      open = _.includes(e.relatedTarget.classList, 'result');
    }
    this.setState({ open: open, focused: false, });
  }

  handleFocusSearch = (e) => {
    this.setState({ open: true, focused: true, });
  }

  handleSegment = (search) => {
    const segmentationApi = 'http://182.61.145.178:3000/stage/api/segmentations/';
    fetch(segmentationApi, {
        method: 'POST',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({ search })
      })
      .then((response) => (response.json())
        .then((responseJsonData) => {
          console.log(responseJsonData)
          this.setState({
            segmentations: responseJsonData.filter((item,
              index, array) => (item.length > 1))
          })
        })
        .catch((error) => {
          console.log(error);
        })
      )
  }

  setSelected = (value) => {
    this.props.form.setFieldsValue({
      selected: value,
    })
  }

  render () {
    const { placeholder, ...rest } = this.props;
    const { isLoading, results } = this.state;

    return (
      <Search
        loading={isLoading}
        onResultSelect={this.handleResultSelect}
        onSearchChange={_.debounce(this.handleSearchChange, 500, {
          leading: true
        })}
        results={results}
        resultRenderer={resultRenderer}
        placeholder={placeholder}
        open={this.state.open}
        onFocus={this.handleFocusSearch}
        onBlur={this.handleBlurSearch}
        {...rest}
      />
    )
  }
}

export default MySearch

这个是我用 Semantic-UI-React 的实现, 其中 handleSegment 是用来对搜索词分词然后进行过滤的, 作者实验时可以去除.希望作者能把这个功能实现了.