0

我正在处理 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>
    )}
4

1 回答 1

0

我想我理解您的问题，即使您发布了无法运行的代码。

<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 );

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

于 2017-04-21T12:27:28.000 回答