react日常疑问,antd select组件的使用

完全复制的官方示例:
这是官方的示例代码:

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <div>
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>Disabled</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} allowClear disabled>
      <Option value="lucy">Lucy</Option>
    </Select>
  </div>
, mountNode);

下面是我的实际使用

          <div>
              <Select defaultValue="lucy" style={{ width: 120 }}  onChange={this.handleChange}>
                <Option value="jack" type='option'>Jack</Option>
                <Option value="lucy" type='option'>Lucy</Option>
                <Option value="disabled"  disabled>Disabled</Option>
                <Option value="Yiminghe" >yiminghe</Option>
              </Select>
          </div>

错误提示:

TypeError: Cannot read property 'isSelectOptGroup' of undefined
(anonymous function)
C:/Users/wenji/Desktop/my-react-app/node_modules/rc-select/es/Select.js:625

antd官方文档上没有找到和isSelectOptGroup有关的描述,select组件的源码616-635行如下,有没有大侠指点一下

  this.getLabelBySingleValue = function (children, value) {
    if (value === undefined) {
      return null;
    }
    var label = null;
    React.Children.forEach(children, function (child) {
      if (!child) {
        return;
      }
     if (!!child.type.isSelectOptGroup) {
        var maybe = _this2.getLabelBySingleValue(child.props.children, value);
        if (maybe !== null) {
          label = maybe;
        }
      } else if (getValuePropValue(child) === value) {
        label = _this2.getLabelFromOption(child);
      }
    });
    return label;
  };

尝试给父子组件加上type属性,任然无效

         <div>
          <Select defaultValue="lucy" style={{ width: 120 }} type={{isSelectOptGroup:false}} onChange={this.handleChange}>
            <Option value="jack" type='option'>Jack</Option>
            <Option value="lucy" type='option'>Lucy</Option>
            <Option value="disabled" type={{isSelectOptGroup:false}} disabled>Disabled</Option>
            <Option value="Yiminghe" type={{isSelectOptGroup:false}}>yiminghe</Option>
          </Select>
          </div>
回复
阅读 12.2k
1 个回答

所以,你按官方实例,Select.Option了吗

import { Select } from 'antd';
const Option = Select.Option;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏