在onChange

时间:2019-06-20 11:28:22

标签: reactjs ant-design-pro

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


0 个答案:

没有答案