reactjs - 在 onChange 类中呈现的 OptGroup

Question

我有一个自动建议功能，我正在 App 类中导出和呈现，但是 - 在尝试设置 App onChange 的状态时它无法正常运行。

假设我在 App 中有以下代码

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: null,
      loading: false,
      stock: null,
      range: null,
    }
    this.handleClick = this.handleClick.bind(this);

  }

  onStockChange = event => {
    this.setState({stock: event.target.value})  ;
  }

...

我正在渲染 AutoCompleteBox：

    <AutoCompleteBox 
      onChange={this.onStockChange}
    />

尝试更换盒子时没有任何反应。

我的 Suggest.js 看起来像这样：

import React from "react";
import ReactDOM from 'react-dom';
import { Icon, Input, AutoComplete } from 'antd';

const Option = AutoComplete.Option;
const OptGroup = AutoComplete.OptGroup;

const dataSource = [{
  title: 'Equities',
  children:
  [
  {
    ticker: 'AAPL',
    title: 'Apple',
  },
  {
    ticker: 'MSFT',
    title: 'Microsoft',
  },
  {
    ticker: 'UBER',
    title: 'Uber',
  },
  {
    ticker: 'TSLA',
    title: 'Tesla',
  },
  {
    ticker: 'JPM',
    title: 'JP Morgan',
  },
  {
    ticker: 'GS',
    title: 'Goldman Sachs'
  }
  ],
  }, {
  title: 'FX',
  children: [{
    ticker: 'EURUSD',
    title: 'EUR/USD',
  }, {
    ticker: 'USDTRY',
    title: 'USD/TRY',
  }],
}, {
  title: 'Cryptocurrencies',
  children: [{
    ticker: 'USDBTC',
    title: 'USD/BTC',
  }],
}];

const options = dataSource.map(group => (
    <OptGroup
      key={group.title}
    >
      {group.children.map(opt => (
        <Option key={opt.ticker} value={opt.ticker}>
          {opt.title}
        </Option>
      ))}
    </OptGroup>
  )).concat([
    <Option disabled key="all" className="show-all"></Option>,
]);

export function AutoCompleteBox() {
  return (
      <AutoComplete
        className="certain-category-search"
        dropdownClassName="certain-category-search-dropdown"
        dropdownMatchSelectWidth={true}
        style={{
          margin: '0 8px 8px 0',
          width: '100%'
        }}
        dataSource = {options}
        placeholder = "&nbsp;&nbsp;&nbsp;&nbsp; Find instrument (e.g. BTC)..."
        optionLabelProp="value"
        filterOption={true}
        optionFilterProp={"children"}
        >
        <Input
          prefix={<Icon type="stock"
          style={{ color: 'rgba(0,0,0,.25)' }}
          className="certain-category-icon" />}
        />
      </AutoComplete>
  );
}

---