Как использовать <SelectableValue><T> в графическом интерфейсе - PullRequest
Новая
       0

Как использовать <SelectableValue><T> в графическом интерфейсе

1 голос
/ 19 апреля 2020

Я работаю над созданием выпадающего меню в моем собственном источнике данных grafana, который состоит из агрегированных опций, таких как 'min, max, avg'.Для этого я использую тег Select из @grafana/ui, т.е. import { FormField, Button,Select } from "@grafana/ui"; Это это фрагмент кода рендеринга 

render() {
    const { queryText } = this.props.query;
    const options=[ 
      {
        label:"Max_Aggregation",
        value:'MAX',
        description:'used to perform max aggregation'
      },{
        label:"Min_Aggregation",
        value:'MIN',
        description:'used to perform min aggregation'
      },{
        label:"Avg_Aggregation",
        value:'AVG',
        description:'used to perform avg aggregation'
      }
    ]

    return (

      <div className="gf-form">
        <div>
        <FormField
          labelWidth={8}
          value={queryText || ""}
          onChange={this.onQueryTextChange}
          label="Query Text"
          tooltip="Timeseries query"
        ></FormField>

      <form>
        <label>
          Aggregation
          <select value={this.state.value} onChange={this.onAggregationChange}>
            <option value="max">MAX</option>
            <option value="min">Min</option>
            <option value="avg">AVG</option>
          </select>
        </label>

      </form>
        </div>
        <Button type="button" onClick={this.onDone}>
          Done
        </Button>
        <label>New Aggregation</label>
        <Select
        options={options}
        value={} //value expects a value of <SelectableValue> type
        onChange={
          this.onOptionsChange
        }
        size="auto"
        ></Select>
      </div>
    );
  }
}

Определение для 

/**
 * Used in select elements
 */
export interface SelectableValue<T = any> {
    label?: string;
    value?: T;
    imgUrl?: string;  
    description?: string;
    [key: string]: any;
}

Я хочу знать, как установить значение, используя <SelectableValue><T>.

...