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