antd中的下拉列表select option

4,006 阅读1分钟
  1. option相关方法(onChange)的配置
const { Option } = Select;
---------------------onChange可以获取被选择的列表的value值-----------------
-------在onchange中将value值赋给state是要将onChange改为箭头函数------------
---------------否则会报错(this.setState is not a function)----------------
        const onChange=(value)=> {
            // console.log(`selected ${value}`);
            this.setState({
                category:value*1
            })
        }

        function onBlur() {
            console.log('blur');
        }

        function onFocus() {
            console.log('focus');
        }
  1. Select及option组件的使用
<Select
    style={{ height: 43, width: 485 }}
    placeholder="请选择参赛类别"
    optionFilterProp="class"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    filterOption={(input, option) =>
        option.class.toLowerCase().indexOf(input.toLowerCase()) >= 0

    }
>
---------------------------展示从后端传来的接口信息-------------------
    {
        this.state.option.map((item,index) => (
            <Option value={item.category_id}>{item.category}</Option>
        ))
    }
</Select>