如何访问 Ant select 的键值

Question

我需要获取 selected item 的 item ID，在我的例子中，用户键入输入并从 API 表单中获取结果如下迭代 <Option> 的数组。

<Select
    mode="multiple"
    style={{ width: '100%' }}
    placeholder="Select Invoices"
    defaultValue={[]}
    onChange={handle_select_invoices}
    optionLabelProp="label"
    onSearch={search_invoice_by_number}
    >
    {
    invoices.map((el,index) => {
        return <Option key={el.invoice_id} value={el.invoice_number}></Option>
    })
    }
</Select>

当用户 select 一个选项时，handle_select_invoices 被触发。它需要两个参数 value 和 key。

const handle_select_invoices =(value,key) => {
    console.log(' ************** IDS ****************')
    console.log(key)
}

function search_invoice_by_number(value) {
    var data={'invoice_number':value};
    axios.post('http://localhost:4000/get_invoice_by_number',data).then(
        response => {

            if(response.data.length > 0){
                set_invoices(response.data);
            }else{
                set_invoices([]);
            }
        },error =>{
            Swal.fire({
                title: 'Error!',
                text: 'Please Contact your software developer',
                icon: 'error',
                confirmButtonText: 'OK'
            })
        }
    )
}

问题

当用户 select 有多个项目时，console.log 显示一个空的 Json 元素并且仅填充数组中的最后一个元素。

导致此结果的代码有什么问题？

Answer 1

好的，我想我明白你的意思了。这是我建议你这样做的方法。在跟踪 selectedValues 的状态中使用变量。在 select onChange 中，只需将它们设置为 handleChange = values => setSelectedValues(values) 的状态即可。在搜索中，从 API 获取新数据后，像这样过滤 selectedValues：

set_invoices(response.data);
const values = selectedValues.filter(value => 
    data.map(i => i.invoice_number).includes(value)
);
setSelectedValues(values); // filter out the values that do not exist in the new data

并且您的 select 将包含一个额外的道具 value={selectedValues}。

这是一个包含一些虚拟数据的工作示例：https://codesandbox.io/s/pedantic-carson-xwydd?file=/src/App.js:699-805

如何访问 Ant select 的键值

How to access the key's value of Ant select

javascript

multi-select

reactjs

antd