Blueprint Выберите значение поля - PullRequest
Новая
       31

Blueprint Выберите значение поля

0 голосов
/ 01 июня 2018

Я работаю с компонентом BlueprintJs Select, и он может выполнять рендеринг.Однако он не отображает текст значения, как он должен отображаться.Я не уверен, почему это не отображается.Поскольку Select использует InputGroup, в документе говорится, что для ввода значения и функции onchange необходимо использовать inputProps, но это, похоже, не работает.Мой код следующий 

import React from 'react';
import { Select } from '@blueprintjs/labs';
import { MenuItem, Button } from '@blueprintjs/core';
import PropTypes from 'prop-types';

class BlueprintSelect extends React.Component {
  constructor(props) {
    super(props);
    const elementSelectItems = [
      { id: 1, query: 'term(s)' },
      { id: 2, query: 'range' },
    ];
    this.state = {
      elementSelectItems,
      selectedValue: elementSelectItems[0].query,
    };
  }

  handleElementSelect = ({ query }) => {
    console.log('printint our', query);
  }

  renderSelect = ({ handleElementSelect, item }) => (
    <MenuItem
      key={item.id}
      label={item.query}
      onClick={handleElementSelect}
      text={item.query}
      shouldDismissPopover
    />
  )

  render() {
    const elementSelectItems = [
      { id: 1, query: 'term(s)' },
      { id: 2, query: 'range' },
    ];
    return (
      <div className="elementSelector">
        <Select
          inputProps={{ value: this.state.selectedValue, onChange: this.handleElementSelect }}
          items={elementSelectItems}
          filterable={false}
          itemRenderer={this.renderSelect}
          onItemSelect={this.handleElementSelect}
          noResults={<MenuItem disabled text="No results." />}
        >
          <Button className="querySelectButton" text="query Type" rightIconName="caret-down" />
        </Select>
      </div>
    );
  }
}

, почему значение не может отображаться, когда я выбрал один из двух пунктов меню, особенно когда реализуется контролируемое состояние со свойством inputProps для компонента Select?

1 Ответ

0 голосов
/ 15 октября 2018

В примере они устанавливают значение в текстовом атрибуте вложенной дочерней кнопки Компонента раздела.Вот пример https://blueprintjs.com/docs/#select/select-component. Я бы сделал что-то вроде: 

<Section> ... <Button text={this.state.selectedValue || elementSelectItems[0].value} /></Section>
...