Как использовать DataSearch в качестве контролируемого компонента из Reactivesearch? - PullRequest
Новая
       14

Как использовать DataSearch в качестве контролируемого компонента из Reactivesearch?

1 голос
/ 03 мая 2019

Я новичок в библиотеке ReactiveSearch, и я реализовал компонент DataSearch с автоматическим предложением в качестве поисковой панели на своем сайте. Я добавил value и onChange для того, чтобы сохранить входное значение как состояние, но как только я добавил проповедь value, я больше не могу печатать в строке поиска. Что не так?

Я также хочу знать, какую функцию обратного вызова я могу использовать, когда нажимаю на одно из предложений, чтобы вызвать какое-то событие, я пробовал onClick, но это не сработало. Вот мой код, любая помощь приветствуется! 

import * as React from 'react';
import {
  ReactiveBase,
  DataSearch,
} from '@appbaseio/reactivesearch';

import './SearchBar.scss';

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  handleInputChange = (event) => {
    this.setState({ searchTerm: event.target.value });
  };

  handleSearch = () => {
  // do something...
  };

  public render() {
    return (
      <React.Fragment>
        <ReactiveBase
          app="rooms,floors,assets"
          url="http://localhost:9200"
          headers={{
            'Access-Control-Allow-Origin': '*'
          }}
          style={{ display: 'inline' }}
        >
          <DataSearch
            componentId="SearchRoom"
            dataField={['roomName', 'roomNumber', 'floorName', 'assetName']}
            placeholder="Search for rooms or assets"
            style={{ width: 500, display: 'inline-block' }}
            fuzziness={1}
            value={this.state.searchTerm}
            onChange={this.handleInputChange}
            //how to trigger handleSearch when I click one of the suggestions?
          />
        </ReactiveBase>
      </React.Fragment>
    );
  }
}

1 Ответ

1 голос
/ 08 мая 2019

onChange возвращает обновленное значение, но не возвращает Synthetic Event.Я обновил компонент Demo of DataSearch из документации, чтобы использовать контролируемое поведение.

Я также добавил функцию обратного вызова, которая будет вызываться при выборе любого предложения.Вы можете использовать downShiftProps для достижения этой цели.

Проверьте приложение здесь .Вы также можете прочитать больше об этом реквизите здесь .

Надеюсь, это поможет!

...