鍍金池/ 問答/HTML/ react日常疑問,antd select組件的使用

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>
回答
編輯回答
菊外人

所以,你按官方實例,Select.Option了嗎

import { Select } from 'antd';
const Option = Select.Option;
2017年10月8日 08:34