蓝图选择值字段

Question

我正在使用BlueprintJs Select组件，它能够渲染。但是，它不会显示任何应显示的值文本。我不确定为什么它没有显示。因为 Select 使用的是 InputGroup，所以文档说使用 inputProps 来设置值和 onchange 函数，但这似乎不起作用。我的代码如下

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

为什么当我选择两个菜单项之一时无法显示该值，尤其是在使用 Select 组件的 inputProps 属性实现受控状态时？

Answer 1

在示例中，他们在部分组件的嵌套子按钮的文本属性中设置值。https://blueprintjs.com/docs/#select/select-component 有一个例子。 我会做这样的事情：

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