如何使用 DataSearch 作為 Reactivesearch 的受控組件？

Question

我是 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>
    );
  }
}

Answer 1

onChange返回更新后的值，它不返回Synthetic Event 。 我已更新文檔中的 DataSearch 組件演示以使用受控行為。

我還添加了一個回調，當您選擇任何建議時會調用該回調。 您可以使用downShiftProps來實現這一點。

在此處檢查應用程序。 您還可以在此處閱讀有關此道具的更多信息。

希望這可以幫助！