Reactjs 蓝图选择值字段

Reactjs 蓝图选择值字段,reactjs,blueprint,blueprint-css,Reactjs,Blueprint,Blueprint Css,我正在使用BlueprintJs选择组件,它能够渲染。但是,它不会像应该显示的那样显示任何值文本。我不知道为什么它没有被显示出来。因为Select使用的是InputGroup,所以文档说要使用inputProps来设置值和onchange函数,但这似乎不起作用。我的代码如下 import React from 'react'; import { Select } from '@blueprintjs/labs'; import { MenuItem, Button } from '@bluepr

我正在使用BlueprintJs选择组件,它能够渲染。但是,它不会像应该显示的那样显示任何值文本。我不知道为什么它没有被显示出来。因为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>
    );
  }
}
从“React”导入React;
从'@blueprintjs/labs'导入{Select};
从'@blueprintjs/core'导入{MenuItem,Button};
从“道具类型”导入道具类型;
类BlueprintSelect扩展了React.Component{
建造师(道具){
超级(道具);
常量元素SelectItems=[
{id:1,查询:'term(s)},
{id:2,查询:'range'},
];
此.state={
元素选择项,
selectedValue:elementSelectItems[0]。查询,
};
}
handleElementSelect=({query})=>{
log('printint our',query);
}
renderSelect=({handleElementSelect,item})=>(
)
render(){
常量元素SelectItems=[
{id:1,查询:'term(s)},
{id:2,查询:'range'},
];
返回(
);
}
}

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

在本例中,他们设置了Section组件嵌套子按钮的文本属性值。有一个例子。 我会这样做:

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