Question

我正在研究antd select并且正确填充它有问题，我可以通过其initialValue字段装饰器预填充选择框，但是它填充字符串，似乎没有办法获得值（我可以解决但不理想的事情，更重要的是，如果未选择/删除选项，则选择中不再提供选项，与标准选项不同。我可以包括选择列表选项和初始值（如下面的代码所示），但它允许重复自动输入，它在下拉列表中出现两次。我有什么想法我做错了吗？

预选和完整选项列表的准备

    let defaultSelect = [];
    let selectList = [];
    for (var a = 0; a < this.props.myData.length; a++) {
        //push all options to select list
        selectList.push(<Select.Option key={this.props.myData[i].id} >{this.props.myData[i].name}</Select.Option>)
        //this is my code to pre-populate options, by performing a find/match
        let matchedTech = _.find(this.props.myDataPrepopulate, { id: this.props.myData[i].id });
        if (matchedTech) {
            //notice I can push just the string name, not the name and the id value.
            defaultSelect.push(this.props.myData[i].name);
        }
    }

选择代码

    {getFieldDecorator(row.name, {
        initialValue: defaultSelect
    })(
    <Select
        tags
        notFoundContent='none found'
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        {selectList}
    </Select>
    )}

Answer 1

我想我理解你的问题，即使你发布的代码没有运行。

<Select.Option>就像普通的html <select><option/></select>一样。为了给选项一个值，它需要一个value属性，用于标识选项。

有关工作示例，请参阅http://codepen.io/JesperWe/pen/YVqBor。

转变为你的榜样的关键部分将成为：

this.props.myData.forEach( data => {
    selectList.push(<Select.Option value={data.id} key={data.id}>{data.name}</Select.Option>);
} );

defaultSelect = this.props.myDataPrepopulate.map( data => data.id );

（我冒昧地使用比原版更现代的代码模式）

antd prepopulate标签和多选

1 个答案: