SemanticUI Search - выпадающий выбор не заполняет ввод

Question

Я строю компонент ввода, используя Semantic UI React.Я хочу, чтобы он открывал раскрывающийся список всякий раз, когда в фокусе, вместо поведения по умолчанию, которое должно показывать результаты, когда пользователь изменяет строку поиска.Я использую реквизиты, доступные на их сайте здесь .

Вот некоторые из моих соответствующих кодов:

constructor(props) {
  super(props);
  this.handleResultSelect = this.handleResultSelect.bind(this);
  this.handleFocusSearch = this.handleFocusSearch.bind(this);
  this.handleBlurSearch = this.handleBlurSearch.bind(this);
  this.state = ({
    results: [{
      "title": "Roob, Cummerata and Watsica"
    },
    {
      "title": "Stanton, Kessler and Walsh"
    },
    {
      "title": "Boyle, Schuppe and Renner"
    }],
    value: '',
    open: false,
  });
}

handleBlurSearch () {
  this.setState({ 
    open: false,
    focused: false,
  });
}

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

handleResultSelect(e, {result}) {
  this.setState({ value: result.title });
}

render() {
  var searchProps = {
    input: <input className='custom-form-field' placeholder={this.props.placeholder}/>,
    open: this.state.open,
    onFocus: this.handleFocusSearch,
    onBlur: this.handleBlurSearch,
    results: this.state.results,
    onResultSelect: this.handleResultSelect,
    value: this.state.value,
  };

  return ( 
    <SemanticUI.Search {...searchProps} />
  );
}

Однако, при выборе результата, название результатазначение не установлено во входном значении.Более того, при отладке я обнаружил, что handleResultSelect даже не вызывается.

Мое первое предположение состоит в том, что onBlur приводит к закрытию раскрывающегося списка результатов, а событие выбора результата игнорируется.Я не уверен, хотя;Я очень новичок в React и Semantic.

Любая помощь в выяснении этого будет приветствоваться.

Answer 1

Другой вариант, посмотрите на выпадающий компонент.Пример поиска в выпадающем меню может показать поведение, которое вы пытаетесь создать.

https://react.semantic -ui.com / modules / dropdown / # types-search-selection

Answer 2

Я очень ценю ответ Р. Райта, но задержка в 200 мс, которая добавлялась к размытию выпадающего меню, не соответствовала стандартам UX.Поэтому я немного углубился в javascript blur и обнаружил, что у него есть атрибут relatedTarget, который можно использовать, чтобы увидеть, на каком элементе был сделан клик.

Обратите внимание, что это каким-то образом работает только с элементами DOM с атрибутом tabindex, поэтому мне также пришлось изменить обработчик результатов Semantic Search , чтобы каждый результат имел атрибут tabindex=0.Кроме того, можно переопределить фокусный CSS по умолчанию, который применяется к элементам с tabindex.

Используя это, я отредактировал handleBlur, чтобы установить open: true, если _.contains(event.relatedTarget.classList, 'title').

Вот мой соответствующий код:

constructor(props) {
  super(props);
  this.handleResultSelect = this.handleResultSelect.bind(this);
  this.handleFocusSearch = this.handleFocusSearch.bind(this);
  this.handleBlurSearch = this.handleBlurSearch.bind(this);
  this.state = ({
    results: [{
      "title": "Roob, Cummerata and Watsica"
    },
    {
      "title": "Stanton, Kessler and Walsh"
    },
    {
      "title": "Boyle, Schuppe and Renner"
    }],
    value: '',
    open: false,
  });
}

handleBlurSearch (event) {
  let open = _.contains(event.relatedTarget.classList, 'title');
  this.setState({ 
    open: open,
    focused: false,
  });
}

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

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

render() {
  var searchProps = {
    input: <input className='custom-form-field' placeholder={this.props.placeholder}/>,
    open: this.state.open,
    onFocus: this.handleFocusSearch,
    onBlur: this.handleBlurSearch,
    results: this.state.results,
    onResultSelect: this.handleResultSelect,
  };

  return ( 
    <SemanticUI.Search {...searchProps} />
  );
}

Answer 3

Попробуйте добавить значение prop в searchProps.Кроме того, события onBlur и onResultSelect конфликтуют друг с другом, поэтому я добавил задержку с помощью функции lodash.debounce.

Итак, что-то вроде этого

class SearchExampe extends React.Component {
  constructor(props) {
    super(props);
    this.handleResultSelect = this.handleResultSelect.bind(this);
    this.handleFocusSearch = this.handleFocusSearch.bind(this);
    this.handleBlurSearch = this.handleBlurSearch.bind(this);
    this.handleSearchChange = this.handleSearchChange.bind(this);

    this.state = {
      results: [
        {
          title: "Roob, Cummerata and Watsica"
        },
        {
          title: "Stanton, Kessler and Walsh"
        },
        {
          title: "Boyle, Schuppe and Renner"
        }
      ],
      value: " ",
      open: true
    };
  }

  handleSearchChange(e) {
    this.setState({ value: e.target.value });
  }

  handleBlurSearch() {
    this.setState({
      open: false,
      focused: false
    });
  }

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

  handleResultSelect(e) {
    this.setState({ value: e.target.value, open: false });
  }

  render() {
    var searchProps = {
      input: <input className="custom-form-field" onChange={this.handleSearchChange} placeholder="placeholder" />,
      open: this.state.open,
      onFocus: this.handleFocusSearch,
      onBlur: _.debounce(this.handleBlurSearch, 100, {}),
      results: this.state.results,
      onResultSelect: this.handleResultSelect,
      value: this.state.value
    };

    return <Search {...searchProps} />;
  }
}