Question

我使用此https://ant.design/components/form/蚂蚁模板创建了一个表单。对于下拉菜单，我需要从数据库中检索值。但是我仍然找不到实现的方法。

我正在使用react js，我可以从componentDidMount（）方法中的数据库中获取值。但是我找不到将其传递给ant中定义的下拉数组的方法。

 for (var i = 0; i < array.length; i++) {
            dropdownItems = [{
                value: array[i],
                label: array[i]
            }
            ];
  }

在上面的代码中，我尝试将其提取到dropdownItems数组中。但是由于dropdownItems是只读属性，所以这是不可能的。那么我们如何实现呢？

Answer 1

您应该以组件的状态存储下拉列表值。

import { Select } from 'antd';
class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
          dropdownItems: [],
          selectedValue: null
        }
    }

    componentDidMount(){
      fetch(api)
      .then(resp => resp.json())
      .then(dropdownData => {
         this.setState({ 
           dropdownItems: dropdownData.map(item => ({ value: item, label: item })) }) 
      })
    }

    handleChange = (value) => {
       this.setState({ selectedValue: value })
    }

    render(){
        const { dropdownItems, selectedValue} = this.state;
        return(
          <Select defaultValue={selectedValue} onChange={this.handleChange}>
            {dropdownItems.map((item, index) => <Select.Option value={item.value} key={index}>{item.label}</Select.Option>)}
          </Select>
        );
    }
}

从db检索值以ant形式下拉

1 个答案: