我需要创建一种级联界面,在该级联界面中,选择第一个选项时,必须具有一个REST API才能获得第二个选项,具体取决于选择的第一个选项
为此,我选择了antd级联器: https://ant.design/components/cascader/
但是我遇到以下错误:
(anonymous function)
src/containers/ExtractPageTemplate/index.js:46
43 | label: `${targetOption.label} Dynamic 2`,
44 | value: 'dynamic2',
45 | }];
> 46 | this.setState({
47 | options: [...this.state.options],
48 | });
49 | }, 1000);
我的代码是这样的:
import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
}, {
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
}];
export default class extends Component {
constructor(props) {
super(props);
this.state = {options};
}
onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
loadData(selectedOptions){
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// load options lazily
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
}, {
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
}];
this.setState({
options: [...this.state.options],
});
}, 1000);
}
render(){
const { rowStyle, colStyle, gutter } = basicStyle;
const TabPane = Tabs.TabPane;
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.PageAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
subtitle={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
>
<ContentHolder>
<Cascader
options={this.state.options}
loadData={this.loadData}
onChange={this.onChange}
changeOnSelect
/>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
答案 0 :(得分:2)
您的函数未绑定到您的课程。 您有2个解决方案:
将其转换为箭头函数,以便上下文自动绑定到您的类:
loadData = selectedOptions => {
或将其绑定:
constructor(props) {
super(props);
this.state = {options};
this.loadData = this.loadData.bind(this)
}
您也可以将其绑定到JSX中:
<Cascader
options={this.state.options}
loadData={this.loadData.bind(this)}
onChange={this.onChange}
changeOnSelect
/>
稍后您可能会使用onChange
函数
答案 1 :(得分:1)
将您的函数转换为es6箭头函数,然后它应该可以工作
loadData = (selectedOptions)=>{
//YOUR CODE HERE
}
答案 2 :(得分:0)
问题在您的代码中看起来是您尚未将此作用域绑定到您的函数。您可以将其绑定到构造器中,如下所示,在构造器内部-
this.loadData = this.loadData.bind(this);
或将ES6格式用于以下功能-
loadData =(selectedOptions)=> { }